KB Article 10172

Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

JavaScript events in jQuery Mobile

Product: WebSmart ILE Type: Frequently Asked Question

jQuery Mobile primarily uses AJAX to submit and receive content from the server. This is fundamentally different from a regular web application which loads content through a new page load. Loading content through AJAX can be considered "content manipulation" rather than a page load.

This means if you have JavaScript code in your document that you would expect to be excuted on a new page load it actually won't be triggered because the entire page hasn't been loaded, only the needed portion of the page via AJAX.

To get around this you can take advantage of jQuery Mobile's built in events.

The first event, "mobileinit" event, is triggered when the mobile plug-in is initialized so the jQuery Mobile-only function becomes available, but before the HTML DOMs are loaded and the standard jQuery's "ready" event. This only happens at the beginning of the page load. Remember that the subsequent page could be loaded by AJAX, thus the mobileinit may not be called again.

The "ready" event, the default jQuery ready event, is triggered after all the HTML DOM elements are loaded. Like, "mobileinit", this is only triggered at the beginning of the page load. If the subsequent pages are loaded by AJAX, the "ready" event won't be triggered again since the page itself is not reloaded.

As mentioned above, neither the "mobileinit" nor "ready" event will be triggered again because an AJAX call to replace data is not a page re-load. So what can you do to call your JavaScript or jQuery code each time a new content is loaded? jQuery Mobile provides its own custom events just for this. There are myriads of events (which you can check out on their API documentation page) for every step of the way as your remove the last page and load a new one. We'll focus on "pageload" for now.

The "pageload" event is called after the page is successfully loaded and inserted into the DOM via AJAX. It's essentially the equivalent to how you would use the "ready" event with non-jQuery Mobile, non-AJAX programs. Once the page is loaded, the animation to display the page begins.

The "pageshow" event is then called after the transition animation is completed. This is the point where the users actually see the page.

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Please enable JavaScript in order to rate this page.