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
Related
I want to open a new page as popup. I google it but not able to find answer.
Is Possible to do like that ??
Any Other Method to like that..I search all the Jquery mobile Doc. but not able to find any thing.
Here is my Code::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Popup</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
</div>
<div data-role="page">
<div data-role="Header">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="Footer">
Sounds Good
Cancel
</div>
</div>
</body>
</html>
Short answer is no, it cant be done, at least in jQuery Mobile versions < 1.4. Popup as it is MUST be part of the page DIV and as such it can't be accessed outside of a page.
There is another solution, you can replace your second page div with data-role="popup" and place it inside a first page DIV, it would look like this:
jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/103/
HTML :
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
<div data-role="popup" id="popupExample">
<div data-role="header"class="ui-content">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="footer" class="ui-content">
Sounds Good
Cancel
</div>
</div>
</div>
You will need to play with a CSS to make it look nicer.
Other solution would be to wait for jQuery Mobile 1.4 which will allow for popup to be placed outside page DIV, so you can share it among several pages. Unfortunately jQuery Mobile is in alpha state and this feature is still not working correctly.
I would like my header and footer to be accessible when a page has an overlay due to a popup menu (as seen on http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html).
So in a nutshell, only the div with attribute 'data-role=content"' should have the overlay applied.
If possible, this should be achieved using a minimum of extra CSS and/or JavaScript. I've looked through the entire jQuery Mobile docs, but haven't found any reference to my problem.
Some code:
<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div data-role="content">
Menu
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
<ul data-role="listview" data-inset="true" style="width: 200px">
<li>Add</li>
<li>Edit</li>
<li>Manage</li>
<li>Delete</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
So in this exmaple, the header and footer shouldn't be overlayed when the Menu link is clicked.
The z-index css property allows you to set the way the different "layers" of your page are superposed. A fixed header in jquery mobile has a z-index of 1000.
By setting the z-index of your overlay to a value below 1000, it will be displayed "under" the header.
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.
I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.
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