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
Related
I am trying to apply a slide transition between divs with Jquery Mobile.
I have the below HTML structure:
// More content ... No jQuery Mobile needs
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
I copied the structure from a W3School demo. But doesn't work for me.
In first place, #p1 and #p2 hace display:block. And when i click the links the content doesn't change.
Any ideas ?
Have you included jQuery and jQueryMobile correctly.Your code is working
as follows.
<!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.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
</body>
</html>
I am new for jquery mobile. I got two pages which are page1.html and page2.html. page1 will navigate to page2 and inside page2 got a navbar.
Here is my code
page1.html navigate to page2
$.mobile.pageContainer.pagecontainer("change", "page2.html", {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
reloadPage: false,
changeHash: true
})
page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>
</div>
</div>
</body>
</html>
It can be work if i run page2 individually. But problem come once i change page from page1 to page2. please dont reply me add rel="external" It may cause white screen issue once i using rel="external"
This is a known jQuery Mobile 1.4 bug, it will be fixed in jQuery Mobile 1.4.3 version.
Read more about it here: https://github.com/jquery/jquery-mobile/issues/7169
There you will also find a workaround.
There's one other solution, it requires you to dynamically create tab widget, something like this:
$(document).on("pagecreate", "#p2", function () {
var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li>Tab 1</li><li>Tab 2</li><li>Tab 3</li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
$("#p2 .ui-content").append(tabs).enhanceWithin();
});
Working example: http://jsfiddle.net/Gajotres/JAuwV/
Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:
<html>
<head>
<title>Testing</title>
<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 src="/js/dygraph-combined.js"></script>
</head>
<body>
<div class="page" data-role="page">
<div class="header" data-role="header">
<h1>Header</h1>
</div>
<div class="ui-content" data-role="main">
<div id="graph" style="border:1px solid"></div>
</div>
<div class="footer" data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//<![CDATA[
new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
//]]>
</script>
The graph does not get displayed. All I see is a blank div. But if I replace the body with just
<body>
<div id="graph"></div>
</body>
This works fine.
Could it be to do with the timing of when I create my Dygraph object?
For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div role="main" class="ui-content" >
<div id="graph"></div>
</div>
</div>
Use CSS to set the graph size:
#graph { height: 300px; }
In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:
var g1;
$(document).on("pageshow", "#page1", function(){
if (!g1){
g1 = new Dygraph(document.getElementById("graph"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
}
});
Here is a DEMO
In my HTML file:
<div data-role="content" id="termsContent">
<div id="termDiv"></div>
</div>
in my js file:
$(function () {
$("#termsPage").live('pagecreate', function(event,ui){
$("#termDiv").load("tnc.html").trigger('create');
});
});
Then, in my tnc.html file:
<a href="http://www.xxx.com/usage-terms.html">
I seem can't find any solution in Google on how to load the local html page correctly. Does anyone have suggestion/experience on this? I want to show the clicked link directly.
You were close but not enough.
.trigger('create') can not be used after a load function. Load function is asynchronous so we need to wait for success state to trigger pagecreate.
Button example is not going to be shown, it needs to be closed.
Do not use pagecreate, in this case pagebeforeshow
Here's a working example:
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="termDiv">
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
load.html :
Onen link
index.js :
$(document).on('pagebeforeshow', '#index', function(){
$("#termDiv").load("load.html", function(){
$('#index').trigger('create');
});
});
I hope this was what you wanted all along.
When I open the page directly, the maps section will load. However, when I open the page from a link on another page, the maps will not load. I saw previous posts that said that the script must not be in the Head tags because they will not load. However, when I place them in the data-role="page" section, its still fails to load the maps. My code is below. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boilerplate
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$(function() {
$('#map_canvas').gmap();
});
</script>
</head>
<body>
<div id="detailpage" data-role="page" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-id="head1" data-position="fixed"> <h1>Header</h1>
</div>
<!-- /header -->
<div data-role="content">
<hr> <b>Title Section</b>
<hr> This is a detailed description section where we can insert some content here with
<br> some page breaks in it.
<br>
<hr> This section contains details about the businsess and some other controls and forms.
<br>
<br>
<hr>
<div id="map_canvas" style="width:100%;height:250px">
</div>
</div>
<!-- /content -->
<div data-role="footer" data-id="foot1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
D
</li>
<li>
C
</li>
<li>
P
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
</body>
</html>
The header is only loaded on the first JQuery Mobile page accessed. Scripts for each individual page should be included in the data-role="page" div for that page.
Also, your Google Maps load should look something like this.
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Here is Google's getting started section on the Google Maps API.