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.
Related
I want to build a JQM app of single page app.
I need the menu to be in a separate file and that every "page" will be also in saparate file and all the includes and the template will be in the index.html.
how can I do it?
Thank you
In JQM content visible only data-role='page' and you need to manage each page by id attribute only. And you need to manage menu, header, footer..etc for all common files to be saved in separated files, after you can load using load() function. Inside `$(this).trigger('create');' for applying JQM default styles and attributes. If you have any issues in this structure plz feel free to ask me.
<!DOCTYPE html>
<html>
<head>
<title>your app title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript">
$(document).on('pagecreate', function (event) {
$("[id*=header]").load('header.html', function () {
$(this).trigger('create');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header" id="header"></div>
<div data-role="content">
Page one content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageTwo">
<div data-role="header" id="header"></div>
<div data-role="content">
Page two content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageThre">
<div data-role="header" id="header"></div>
<div data-role="content">
Page three content
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
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
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});
I am currently doing some development for Windows Phone 7 using phonegap+jquery mobile
For some reason, Windows phone emulator included in the latest Visual Studio express could not render simple multipage app.
Anyone have some pointers on how to solve this? Thank you
below is the code. It is pretty much taken from jquery mobile documentation.
<!DOCTYPE html>
<html>
<head>
<!--
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no;" />
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<title>JQ Tester</title>
<link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/custom-scripting.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-title="Page One">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>
This is a multi-page single page template that has just one page within it.
</p>
<p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>
You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
</p>
<h3>Show internal pages:</h3>
<p>
Show page "two"
</p>
<p>
Show page "popup" (as a dialog)
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a" data-title="Page Two">>
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>
I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page popup -->
</body>
</html>
The viewport is the problem here, is not the same on all plataforms and devices, for Windows Phone 7 you can try add this code to the head tag
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
Good Luck!
I copied your code into a new Phonegap 1.4.1 project and it worked with both jQuery 1.6.4 and 1.7.1. I'd suggest trying a different version of jQuery and/or re-installing any dependencies for the project such as the Windows Phone SDK and Phonegap template.
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link