Tuesday, 14 June 2011

jQuery Mobile Ajax page navigation behaviour / way to disable it

jQuery mobile uses Ajax to navigate to different pages by default. This means, the target page's DOM is embedded into the current page. So when you view the source of HTML in browser window, you will only see the first page's HTML. Due to this Ajax request, subsequent
pages will be dynamically added to current page as DOM. This helps light page loads and transition effects on mobile phones.

However, I had a situation where I am reading data from one HTML form and submitting to another HTML form. The form submission failed because the second form does not exists in the page. Because of this I cannot access 'document.secondform.username' since there is not 'secondform' physically present in the page.

To avoid this, I disabled Ajax using the following code.

If you are using links using Anchor tag, add the following attribute to avoid Ajax call.
data-ajax="false"
If you are using form submission, add the following AFTER jQuery JavaScript reference.
$(document).bind("mobileinit", function()
{
$.extend( $.mobile , {
ajaxFormsEnabled: false
});
});

By using above code, the default request model of jQuery mobile changes from Ajax to pure HTTP. The tradeoff is we cannot do transition effects over mobile phones. It's a design decision to make when designing functionality.

No comments:

Post a Comment