In my jQuery Mobile multi-page application, is it possible to check if history.back() would be a page within the application?
I have a link on a subpage of the application that I would like to execute history.back() if that refers to a subpage within the application or just plainly link to the application main page otherwise.
I want to do something like
if(canGoBack) {$.mobile.back();} else {$.mobile.changePage('#main');}
On the initial load of the app, store a flag in the history state object on document.ready:
$(function() {
history.replaceState($.extend(history.state, {root:true}));
});
From then on, whenever we want to check if we can go back, just see if the flag we set is there in the current history state object. If it is, we are on the initial page and cannot go back:
function canGoBack() {
return !(history.state && history.state.root);
}
HTML:
Back
Related
I have seen many techniques and advice for getting deep linking to work in jQuery Mobile, but my situation requires just the opposite.
I have a multi-page document, completely self-contained. I want the entry point to the app to be the first page, and to disable any deep links (edit: by "deep links" I mean bookmarks , or simply the ability to return) to the other pages in the document. I also do NOT want navigation within the app to affect the hash tag. In other words, if the user is in my app, and they hit their browser's back button, I want them to go to whatever page they were looking at before they entered my app, even if they are not on my first page.
What I have tried is to set the changeHash option on the mobile.changePage method to "false" on all my internal backward and forward navigation. But the result is that when they use their browser's back button, they go TWO pages back. Furthermore, this technique has not disabled deep linking, as I wanted it to do.
I'm hoping that someone else can advise without the necessity of me providing code examples, since my code is otherwise rather complex.
You can disable changeHash completely on mobileinit event. Modifying global defaults should be placed in head after jQuery.js and before jQuery Mobile.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="jquery.mobile.js"></script>
And then, you need to listen to back button on navigate event and take user through history, using window.history.back().
$(window).on("navigate", function (event, data) {
if (data.state.direction == 'back') {
window.history.back();
return false;
}
});
Demo
I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).
Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.
I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.
So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.
I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.
Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.
I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.
Using the JQM router you should be able to do something like this
var router;
var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
var params = router.getParams(matchObj[1]);
//use your params to pull data from localStorage
};
router = new $.mobile.Router({
'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
, {orderHandler: orderHandlerRoute }
});
You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline.
This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)
Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach:
- write your target link as file.html#pagename_itemvalue
- bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page
I'm trying to build some custom navigation in a dynamic application, all screens are obtained from the server and thus I registered the pagebeforechange event and execute my own function.
Everything works as I expected except when I refresh the data I destroy the dynamic pages and try to call the page I was in again using the page Id, but this second time, although my code creates the HTML for the page, jQuery Mobile throws an "c.data("page") is undefined" error.
I bind the pagebeforechange event:
$(document).bind('pagebeforechange', function(e, data) {
if(typeof data.toPage === 'string') {
appobj.dynamicPage(data.toPage, data.options);
}
});
Then in the dynamicPage method I create the HTML for my page based on Underscore.js templates and let jQuery continue changing the page:
$.get('templates/page.tpl.html', function (data) {
html = _.template(data, { /* several template parameters */});
});
page = $(html);
page.appendTo('body').page();
The idea was to use as much of jQM as possible since I'm creating the destination page and injecting it into the DOM.
When I need to update the supporting data, that I store in localStorage, I just find all dynamic pages and destroy them:
var current = $.mobile.activePage.attr('id');
$('.dynamicpage').remove();
$.mobile.changePage('#' + current
When running the application I can easily navigate between various screens/pages, even for pages that don't exist when the application starts but if the data needs to be updated (because the user added elements in the application of data in the database changed) then the removal code is executed but the old page is not regenerated ending in a white page with all the DOM contents hidden, but the page I wanted to navigate too seems to be in the DOM (at least firebug tells me so).
If I were to restart development I would probably use Backbone.js to handle my model updates and view changes but for now I'll have to use only jQM. Any suggestions? I understand that jQM is not finding my page but I don't see why since my event should be called and the page regenerated, even with the allowSamePageTransition flag set.
Regards,
Sérgio Lopes
When creating a jquery mobile / phonegap app, is it ok to pass variables through the url from one page to another
page.html?var1=foo&var2=bar
or is does it create a problem when compiling the code?
It should be just fine to pass variables to external pages. Just know that URL variables will only be passed to external pages. Meaning that if you already have an external page in the DOM, you will have to re-load the page to pass it variables again.
I believe that older versions of jQuery Mobile hamper this behavior but you should be good to go with anything 1.0 or later.
Also read the bottom of this page, "Known Limitations": http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-navmodel.html (specifically the second from the bottom bullet)
Update
To reload a page with jQuery Mobile you can use the $.mobile.changePage() function and set the reloadPage option to true:
$(document).delegate('#my-link-id', 'click', function () {
$.mobile.changePage({ reloadPage : true });
return false;
});
Docs: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
it "works", however it's not the best way.
Apps should be all one page with dynamically retrieved and displayed content.
I am doing a PhoneGap app with JQuery Mobile and I have two pages, one that has a dynamic list of pages and one that has a form to either edit or create a page. These are in a single html file.
Tapping on a list item passes ?action=edit and tapping the "Add" button I have, passes ?action=add querystrings.
Here is a jsfiddle to visualize the pages
NOTE: The example doesn't act quite the same as the live code.
I am running my app on an Android phone and if I do these actions, the correct querysting is observed in the alert box: -
Click the add button on list page
Click back on the form page
Click the an edit list item link on list page
However, if I do it the other why around (click edit first, then the add button) clicking the add button never shows the add querystring in the alert box
(the jsfiddle example always locks the first clicked link's querystring, which is even worse than the live code!)
The problem here is that you're using a multiple template to do this. If you were using this as separate pages, this would work as normal. As a multiple app, the best way to handle this would be to make a link trigger the setting of some global variable that keeps track of the current state of the app.
Make the edit links like this
Page 15
Then make the script something like this:
var editingId = 0
function editPage(id){
editingId = id;
$.mobile.changePage("#editingPage");
});
$("div#editingPage").live("pageshow", function(){
loadDataForPage(editingId);
});