I'm using JQM 1.3.2 and 1 page per html file. JQM automatically removes pages from the DOM that are loaded by AJAX. But there is a known issue (clearly stated in the docs and frequently discussed in various forums) where the first page is not removed. I'm wondering if there are any potential pitfalls with this workaround:
$(document).on('pageshow.firstPageRemoval', function (event, data) {
if (data.prevPage.length > 0) {
data.prevPage.remove();
$(document).off('pageshow.firstPageRemoval');
}
});
From my brief testing, it seems to be working as designed. The first page loads, and data.prevPage.length === 0, so it does nothing. After the next page transition, it removes the first page and removes the handler.
My question is, are there any issues that might crop up because I've removed the first page?
Only issue is browser history, basically you will remove page but it will still stay in history.
Of course there's a workaround. Instead of removing first page, don't have one in the first place.
Let your first HTML be blank, and load external page during that page document ready state. Unfortunately you will not be able to use pageinit (or similar page event here) because you will not have initial page to trigger it.
This way you will circumvent this problem and browser history will stay clean and intact.
Related
I want to implement a jQuery Mobile application without browser history navigation (feel free to ask why). I can generate pages on the fly, insert them into the DOM, and bring them up with changeHash set to false, then clean them up in the pagehide event handler, and all is well in the world. Until I use a widget like selectmenu that invokes a dialog. The dialog's close function explicitly invokes window.history.back(), and my world implodes.
Is there a simple workaround for this issue?
If not, should jQM be adapted to gracefully support nav-less apps, or is jQM fundamentally unsuited for this kind of application?
http://jquerymobile.com/test/docs/api/globalconfig.html
Try setting hashListeningEnabled to false
I learned not to use changeHash=false for this purpose. Make sure that the current page is always at the top of the history stack. In my case, it's the only item on the stack except when dialogs are invoked. So far, this seems to be working like a champ:
function showNewPage($page) {
$page.appendTo($.mobile.pageContainer);
$('.ui-page-active').bind('pagehide',function(){$(this).removeWithDependents()});
$.mobile.changePage($page);
$.mobile.firstPage = $page;
}
The new page is created without a hash, so the URL never changes. Since I'm actually replacing the first page, I had to update $.mobile.firstPage. The call to removeWithDependents() instead of remove() cleans up the dialogs that are created by selectmenu.
Fortunately, it's a lot more concise than I anticipated, just a bit of a pain for a newcomer like me to piece together. I've seen a few comments advising not to "hack" jQM in this way, but I think there's way too much value in jQM to constrain it to a traditional server-dispensed presentation model.
On a jQuery Mobile page, I call the PhoneGap Storage function like this:
window.database.transaction(performQuery, error);
And it works. I can use it several times, and it always works.
Then, I use jQuery.mobile.changePage() to change to a different page, then call history.back() from that second page, and back to the original page performQuery() does not get called anymore.
I placed alert() functions both before and after the call to transaction(), and placed one at the beginning of the definition for performQuery(), but the third alert() is never reached after getting back from the second page.
This also occurs with a transaction I put on the second page. It works the first time the second page opens, but it doesn't when I get back to the former page and then back to the second page again.
Also to be noted this question might have the same answer as this other question, although I cannot be sure.
It turns out the culprit is the OS. According to a workmate, Android Honeycomb gives trouble in this regard, something to do with the page change.
Anyway, things work as expected on a different Android device.
Knocked-out a simple jQuery Mobile site with [logon -> index -> content] pages.
If I use the back button to the logon page, I can't escape no matter what I do - forward, back, filling it in, nothing.
I'd like to remove the #logon page from the navigation, so you cannot get back to it without typing it in, or logging out - any advice?
Easiest way to keep a page from showing up in history (with jquery mobile) is show that page in a dialog. This model works particularly well in situations where the content that would be in a dialog is either tangential to the main content or some sort of interrupt (which the login process is). See an example here. DISLAIMER: this is not the right way to implement content like this in the long run, it is only meant to show the effect of using a dialog in a login process to bypass insertion into history.
Another (more manual) route would be to use the a normal jqm page and do your login by way of an ajax posting. If the response came back as successful, then use location.replace() to remove the the current (logon) page from history.
I ended up removing the ajax navigation full stop and sticking to manual, not as pretty but headaches avoided!
I'm trying to figure out exactly what happens when you link to a same-domain external page with JQM. I know the new page gets added to the DOM, but if I cruise through 5 or so of these links, are all 5 now in the DOM?
Firebug is showing the initial page and the active page in the DOM and nothing else.
Chrome is showing variable results, usually storing the last page and the active page.
What exactly happens here?
Do I need to assume all my handlers on a page are lost when I change page? So I need to rebind them on each pageinit?
Easy way to check. Bind page create:
$('#pageID').live('pagecreate', function (event) { alert("Inserted to the dom") };
That triggers when the page is inserted to the dom. If the alert is triggered every time you enter the page, it means the page is not saved to the dom. And I think that is actually the case. But I am not sure.
I'm using JQuery UI tabs loading content via ajax like this:
$('#tabsElem').tabs({ajaxOptions:{cache:false},
cache:true);
Consider this series of events:
Tabs are displayed.
A loading icon is shown while an ajax request is made.
The user selects another tab.
The ajax request hadn't returned yet so it is aborted.
The user returns to the original tab.
The tab's content is now empty and the ajax request will not be resent because of the caching.
I think you can see that last part is a problem. I've looked into a few options but nothing feels great yet. Any beautiful solutions out there?
Turns out the solution is to update your version of JQuery UI.
The results I described happen on version 1.8.6. On version 1.8.16 when you go back to the original tab the aborted ajax request is made again.
Thanks JQuery