I'm trying to understand how $.mobile.changePage works. I placed the method $.mobile.changePage in an anonymous function after the last element in the DOM and it didnt work but if I was to place it in document.ready it works fine. How come? any advice much appreciated
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/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>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script>
(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})();// this doesn't work
$(document).ready(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})//this works
</script>
document ready dont work correctly with jQuery Mobile. Usually it will trigger before pages are loaded inside the DOM.
If you want to find more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
To make it work you need to use correct page event, like this:
$(document).on('pagebeforeshow', '#foo', function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
});
At the same time this is not a good solution. You should not change page while first page is loading, mainly because it will cause jQuery Mobile to misbehave. Ether do it after first page is successfully loaded (page #foo) or change page order and let page #bar be the first page.
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>
When calling changePage() with changeHash = false, the location bar does not change.
Can I have identical behavior with anchor links (e.g. Blah)? I set $.mobile.hashListeningEnabled = false, but the location bar is still updated.
Thanks for the help.
This can be done by setting $.mobile.changePage.defaults.changeHash = false;
Sample code :
<!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.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" href="#page2">Go to page2</a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
figured I'd answer this with a nifty block of code that you can put BEFORE you load jquery mobile AFTER you load jquery, adds the extra attribute 'data-change-hash' to any link tag so that the location does not change
$('a[data-change-hash="false"]').on('click',function(e) {
$.mobile.changePage($(this).attr('href'),{'changeHash':false});
e.preventDefault();
});
will enable you to do this
Test Me!
and your url will stay like http://example.com instead of changing to http://example.com#my-page
try it out: it works for me in jQM 1.4.5
$.mobile.hashListeningEnabled = false;
When applied then page changes does not alter the browser's address bar anymore, in the same way when using explicit calls to:
$.mobile.pageContainer.pagecontainer("change","tosomewhere.html",{ changeHash: false });
Although I like Chad Brown's solution for this, I went with a much simpler and easier to grasp approach specially for people new to jquery.
so I start by creating a function script and can be placed anywhere with in your code, doesn't need to be in a specific handler or callback.
<script>
function goTo(pageID,track){
$.mobile.pageContainer.pagecontainer('change','#'+pageID, {changeHash: track});
}
</script>
and then in my anchor tags I will do just call the function just like this
New Trip
Maybe there is something obvious I cannot see but I think that setting data-theme in the div with data-role=page was supposed to set it for everything:
<!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.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
But I still get the default theme A
What am I doing wrong? Or is this a bug?
It was working in 1 alpha 4 but not in 1 final.
Check the docs, http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
it specifically says: "However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify data-theme="b" to the page div as well as the header and footer divs. "
So this is not a bug.
The answer is that it's currently a bug and there's a ticket open about this
Just moved this from the comments for the OP to be able to mark as answer!
Thanks
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
I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?
My app has two pages, split into two different files - index2_1.html and index2_2.html given below. When I use $.mobile.changePage("index2_2.html", "slide"); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link
Link to 2nd page that works1
it works fine.
Could someone please tell me what I am doing wrong here?
Thanks,
Dilip
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item">Grocery</li>
<li class="category_item">Car</li>
<li class="category_item">Recreation</li>
<li class="category_item">Health</li>
</ul>
<div>
Link to 2nd page that works1
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In contrast to Pravat Maskey's answer, it's possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.
I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section "Scripts in jQuery Mobile Pages".
By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.
You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.