I want to display rgraph bar chart on second page of my multipage Jquery Mobile App. Here is the structure of my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
<script type="text/javascript" src="rgraph/libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="rgraph/libraries/RGraph.bar.js"></script>
<script src="rgraph/libraries/RGraph.gauge.js"></script>
<script src="rgraph/libraries/RGraph.cornergauge.js"></script>
<script src="rgraph/libraries/RGraph.common.dynamic.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
Go to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
// My chart should come here
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
<script>
$(document).ready(function ()
{
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
})
</script>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
But chart is showing on the first page (main page).Is Jquery mobile Document.ready function is working for child pages?if not what should i change to make this working..please help
For jQuery Mobile, don't use $(document).ready(function ().... Instead use the provided page and/or pagecontainer events. For your example you could put the script at the bottom of the html (outside all page markup) and inside a pagecreate event for pagetwo:
$(document).on("pagecreate", "#pagetwo", function(){
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
});
Here is a working DEMO
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the 'bottom' is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* jQuery works if this line is here but not if it is at the bottom
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
</div>
</div>
#* jQery does not work if the script is here! *#
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Some Alternatives
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Option 1
Put a #RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
#section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Option 2
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="#Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag
I'am having a problem with jQueryUi Tabs. I want to have a navigation bar at the left side of my tabs view, but the layout is not working. I think it is a bug, and I will report it to jQuery, but first I want to see if you can confirm this to be a bug, or am I doing something wrong?
Preview my example at [ http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html ].
First you see the non-working tabs example and below the working standard floating div example.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Tablayout problems</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="tabs"><ul><li>A tab page</li></ul>
<div id="a1">Do you see a red bar left of this tab view?</a></div>
</div>
<div style="float:clear"></div>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="no-tabs"><ul><li>A tab page</li></ul>
<div id="a2">Do you see a red bar left of this tab view?</a></div>
</div>
</body>
</html>
The solution here fixed my issue, which looks somewhat like yours. Look at
jquery ui tip floated divs inside for more information.
#yourTabsDiv {
float:left;
width: 100%;
}