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
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'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.
I am using Durandal which is available in the Hot towel template SPA.
The idea is to have a SPA application for a touch based device, and I need to implement swipe feature on some on the divs.
jquery mobile supports swipe feature, but can someone tell me how to use it.
There is a data-bind on the div, where I give the 'swipe: somefuntion' - this does not happen, whereas the same works when I use a click instead of swipe. And somefunction is defined in the view model.
I have included the jquery mobile in the scripts and also in the bundle.
Can someone help me out if this possible?
Here's a working eample: http://jsfiddle.net/Gajotres/pf3kc/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Javascript :
$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){
alert('swipeleft');
});
$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){
alert('swiperight');
});
I'm building an app utilizing JQuery Mobile in which I'm showing a progress bar to indicate to the user their progress based on the steps completed.
For the progress bar I'm utilizing JQuery UI which is simple to implement
<script>
$(document).ready(function(){
var currentStep = $("#formNumber").val(); //get the the current step from form
var totalSteps = 8;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
// Set progress value
$("#progressbar").progressbar({value: formProgress});
$('#percentage').text(formProgress);
});// End function
</script>
However since the pages in JQuery Mobile are loaded via Ajax the progress bar does not show. I'm guessing it's because the "#progressbar" div is empty.
if the pages loads without Ajax it will show the progress bar. Any one knows how i can solve this by allowing the progress bar to show when the page loads via Ajax
Bind to pageinit not dom ready or in this case i bind to pageshow. In a JQM ajax app dom ready only happens once on the first page. So any new content brought into the dom doesn't get the benefit of the code you wrote. Also when the second page is brought into the dom. The first page doesn't go anywhere its just hidden. Because of this using the same id in every page causes problems. Get used to using classes instead. If you need to pick something out of the current page use the .ui-page-active class to help you select the appropriate element.
Something like $('.ui-page-active .formNumber') will select the correct input for you. So here is my revised first step according to the info you gave me.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Step 1</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
<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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function getProgress(){
var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form
var totalSteps = 4;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
$(".ui-page-active .progressbar").progressbar({value: formProgress});
}
$(document).on('pageshow',function(){
getProgress();
});
</script>
</head>
<body>
<div data-role="page" id="step1">
<div data-role="header">
<h1>Step 1</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="1" />
<div class="progressbar"></div>
Step 2
</div><!-- /content -->
</div>
</body>
</html>
step2.html
<div data-role="page" id="step2">
<div data-role="header">
<h1>Step 2</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="2" />
<div class="progressbar"></div>
Step 3
</div><!-- /content -->
</div>
step3.html
<div data-role="page" id="step3">
<div data-role="header">
<h1>Step 3</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="3" />
<div class="progressbar"></div>
Step 4
</div><!-- /content -->
</div>
...... and on and so forth
If you interested I made a sample for you to look at. http://starwebservices.net/so/
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