Am doing the following when using JQM. Please let me know the impact.
Am not using dom caching when using JQM. Have completely removed dom caching for the site.
Am loading some links without AJAX.
How can we specify the page expiry in JQM, if we have to implement it.
If we disable AJAX based of loading in JQM by using $.mobile.ajaxEnabled = false, what will be the impact. If we disable AJAX completely, then we can specify the page expiry. Is it not?
Please provide your valuable inputs so that it will help others who are looking out for the same topic.
Impacts:
Caching pages keep previously-visited pages in the DOM instead of
removing them, so that they are available instantly if the user
returns to them.
To remove caching, you could do,
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = false;
});
If you are not caching page, previous page will not be instantly available.
The drawback of DOM caching is that the DOM can get very large,
resulting in slowdowns and memory issues on some devices
Refer link1,
Refer link2
data-ajax="false" will be loaded with full refreshment of the page, with no animated transition
Refer link3
For setting expiration of page Refer link4
If you disable ajax completely, there will not be a smooth animated transition to your next page
Related
Please can somebody explain in more detail what $.mobile.hashListeningEnabled does when enabled/disabled in jQuery Mobile?
I have tried debugging the source, but there are some bits of code I do not fully understand. And the documentation is a bit abstract (https://api.jquerymobile.com/global-config/):
jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.
The reason I ask, is because I am having problems on iOS 9 with <select data-native-menu="false"> elements. If this list too long, jQuery Mobile creates a full-screen dialog.
But it closes straight after displaying. I have been looking around and noticed somebody else has the same problem: JQuery .popup("open") not working properly on iOS 9 device.
One answer suggested seems to work OK for me - which is to set hashListeningEnabled to false:
$(document).on('mobileinit', function () {
$.mobile.hashListeningEnabled = false;
});
But I am not comfortable rolling this out to production until I understand what exactly it does.
$.mobile.changePage seems to still function.
You can have multiple pages in one html file. And you can go to "another page" even if that page is actually another div with data-role="page" in it.
http://demos.jquerymobile.com/1.4.5/pages-multi-page/
So, if you are using this type of navigation, you are screwed.
Apple guess that somebody could make an XSS attack using hash.
/pages-multi-page/#two
popups are using hash also: /pages-multi-page/#&ui-state=dialog
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.
By default jQueryMobile is supposed to ajax new pages. However the behaviour I am seeing is erratic. Sometimes it works and sometimes (e.g. the next day) it does full page refreshes.
My links are absolutely normal local links to the same page: <a href="./default.htm?a=123>Link 123</a>, no rel="external" no $.mobile.options set etc.
Currently, I'm using Chrome and it's not doing ajax. The exact same application in IE9 is doing ajax (with # history). But I have seen Chrome do ajax (yesterday). If I debug it actually goes into a $.ajax() function for my link but the result still is that the whole page is refreshed.
My question is this: under what circumstances (except those stated above) does jQueryMobile (v1.1.1) fallback to non-ajax page refreshes?
I suspect some browser check or other exception is causing ajax to be circumvented.
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'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.