I built a jQuery Mobile Page, which consists of several different Pages (I don't use divs but pages to load content like in a "traditional" Website.
If a page is loaded without ajax (First Page first load for example or with rel=external) the pageshow event is triggered. If a page is loaded with a jQM Ajax request, the pageshow event is not triggered, does anyone have any idea how to solve this issue?
Thanks in Advance
John
The Solution was, as Omar stated, to put the javascript
$(document).on('pageshow',function(e){/* Code here */});
into the data-role="page" div.
Thanks!
Related
I need to use jQuery Mobile to build an app and I'm stuck at page navigation. I'm using jQuery Mobile 1.4. And the documentation doesn't help me very much. I have a few questions. Any help would be appreciated. Also please point out if I misunderstood anything.
I understood that $.mobile.navigate is the recommended method to change between pages in jQuery Mobile 1.4. Hoe can I use it to send data from one page to another?
What is the need for pagecontainer widget's load method? The change method itself seems to load an external page.
When I use the pagecontainer widget's change method to load an external page, it loads the page into the DOM and changes to it as expected. But, when I go back, the external page is removed from the DOM. Is there anyway to load an external page only once and let it persist in the DOM as long as the app is running?
Based on the jQuery Mobile docs, the <script> tags to load jQuery and jQuery mobile should go inside the <head> element.
I've always been told to load <script> tags at the bottom of the page for better performance. For example: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
Is there a reason to prefer one location over the other for jQuery Mobile scripts?
Putting the <script> at the bottom is to facilitate faster loading of external elements before code executes, but in jQM nothing will really show until the pageinit/pageshow events fire, which is basically jQM's version of document.ready (everything is loaded and the DOM is there etc)
I can imagine in larger sites where you want content to be displayed ASAP this would come in handy, kind of like attaching passive on listeners even before the document.ready is another trick people use.
But all these speed optimizations don't mean much when you're waiting for a document.ready to display anything.
From the index page of the site, I am loading another page which has 3 divs with the data-role of page.
However, jquery mobile only appends one of the pages to the dom.
I presume the changePage function is grabbing the first div with a data-role of page and inserting it. I wonder if there is a way to get it to insert all the divs with a data-role of page or dialog.
Any help more than appreciated.
thanks
What you are trying to do is currently not possible with JQM, as only the first page from a multipage gets loaded into the DOM.
I would point point you to a link in the JQM docs that would explain this behavior, but there isn't one... I already filed this as issue on Github, so that the Docs at least make clear what you can do and what does not work with multipages.
As I'm stuck with the same issue I started writing a plugin to be able to load multipages (among other things). I still have a few things to sort out, but when it's working I can send you the link.
You can use a "subpage" plugin to get the behavior you desire. Basically one page contains a bunch of subpages, which all get loaded into DOM. The pattern would be:
<div data-role="page">
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
</div>
The project is available here: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget.
I've personally been having problems with this plugin, but I think for simple scenarios, it works fine.
Also, there is no documentation for it. For example, I still don't know the proper way to call $.mobile.changePage() with this plugin. :)
According to JQM at this page:
"jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"
You can also add rel="external" attribute to the href pointing to Page B.
rel="external" and data-ajax="false" will force JQM to load the entire page as new. Unfortunately, it appears this removes the ability to use a page transition from PageA to PageB.
Example: Page B
I'm now looking to load Page B with JQM methods instead of relying on the automagic mechanisms. It appears you must use single page templating throughout (as recommended) or pagecontainer load method (essentially the same as single page) if you want hashtag transitions within a "single page", after the DOM is initially loaded. For example, link to a single page, listen to "pageinit" of that page, then use pagecontainer("load"). Make sure the subsequent page (the page your're injecting) is not needed as a direct incoming page.
I have an application developed using phoneGap and jQuery Mobile. On the first page there is a navigation bar that the user clicks to navigate to a page which also has some ajax calls to get JSON feeds from a server. I am doing the following,
<ul>
<li>My</li>
<li>Recent</li>
</ul>
But the page is not loading. But if I open the page directly it works nicely. My ajax calls are in the document.ready() event.
What can I do for this?
I am not familiar with phone gap, but jQuery Mobile will automatically turn internal links into ajax calls. You shouldn't have to do anything with your document.ready().
jQuery Mobile Documentation - Page Links
In jQuery Mobile, the document.ready() only fires when the initial page loads. Also, because jQuery Mobile only pulls in content when it loads a fresh page, nothing in the header is executed. In order to simulate the effect of document.ready() on other pages, do the following:
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
// Insert the calls that were in the document.ready() here.
});
jQuery Mobile Documentation - Page Scrpting
I'm working on a mobile view of our site. I'm trying to implement JQuery mobile but I'm seeing two issues that might prevent me from continuing and hoping some of you have insights.
Many pages are brought up by searches. But when the page is brought up from a search box I can't get it to load as rel='external', thus the page loads via Ajax. Great, except the pages that load are almost always larger pages broken up into data-role='page'. So when the page loads it's unable to navigate within that page, though it does hide the secondary sections. According to the documentation I need to put the rel="external" on the form, but that is not working for me. Is it possible to get the page to load without Ajax via a form submit?
Second question in same topic. In the crawl, walk, run fashion first step is a basic mobile friendly site. But I'm hoping this can also be the foundation for a PhoneGap based version of the site. From what I understand the basic model for PhoneGap will break if pages are not always loaded in Ajax as it will trigger a browser load. Since JQM requires any page with embeded data-role=page sections to be loaded via rel=external, which turns off Ajax loading, does this mean using JQM will preclude using Phone Gap to create the native client later?
Thanks in advance for any replies.
This script below should be put between your jquery min and your jquery mobile min. Otherwise it will not take effect. Adding an extension to the $.mobile with these ajax functionalities turned off may help your issue. All 3 are not needed, but they are all test worthy for your issue.
<script>
$(document).bind('mobileinit',function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxLinksEnabled: false,
ajaxEnabled: false
});
});
</script>
Phonegap is for building phone applications, not mobile websites. It is composed Javascript which talks to specific libraries to interface with the mobile device itself.