Sunday, December 18, 2011

jQuery Mobile Page Transitions with data-ajax=false

In my earlier post here, I outlined the various page transitions that are available in jQuery Mobile. 

In single-page template documents, jQM uses Ajax to smoothly transition between pages and when not possible, the framework does a simple HTTP request to pull in the page. Situations where Ajax transitions are not used are:

When a page loaded is:

  1. from an external domain
  2. data-ajax="false" attribute is used
  3. rel="external" is specified
  4. target attribute is specified

This is also well documented (with examples).

In multi-page template documents, jQM needs Ajax to transition between the multiple page containers. Now lets play with this a bit. Let us try to override this with the data-ajax attribute and see what happens.

Consider below code, you can click on the link below to launch it in a separate browser tab:

<!DOCTYPE html>
    <title>jQuery Mobile Transitions Demo with data-ajax="false"</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="" /> 
    <script src=""></script>
    <script src=""></script>
    <div data-role="page" id="page1">
 <div data-role="content">
        <p><a href="#page2" data-transition="flip" data-role="button">data-transition="flip"</a></p>
        <p><a href="#page2" data-transition="flip" data-role="button" data-ajax="false" data-theme="e">data-transition="flip" data-ajax="false"</a></p>
        <p><a href="#page2" data-rel="dialog" data-role="button">data-rel="dialog"</a></p>
        <p><a href="#page2" data-rel="dialog" data-role="button" data-transition="pop" data-ajax="false" data-theme="e">data-rel="dialog" data-ajax="false"</a></p>
        <p><a href="#page3" data-role="button">data-role="dialog"</a></p>
        <p><a href="#page3" data-role="button" data-ajax="false" data-theme="e">data-role="dialog" data-ajax="false"</a></p>
        <p><a href="#page3" data-role="button" data-rel="dialog">data-rel="dialog" data-role="dialog"</a></p>
        <p><a href="#page3" data-role="button" data-rel="dialog" data-ajax="false" data-theme="e">data-rel="dialog" data-role="dialog" data-ajax="false"</a></p>
    <div data-role="page" id="page2">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse">Back</a>
    <div data-role="dialog" id="page3">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse">Back</a>

When you launch the above code in a browser, you will note one link works properly followed by another link that doesn't. These links are invoked with data-ajax="false" and highlighted here with a yellow theme. You can also open the code inspector (by CTRL+SHIFT+I) and observe how the DOM behaves as you try out the various scenarios.

The entire behavior of transitions in a multi-page template document with data-ajax="false" is not documented at present (see documentation link given earlier). From the above code you will note the following behavior when data-ajax="false" is specified,

  • DOM is not reloaded everytime since this is a multi-page template document
  • Only the default slide transition works, even if you specify any other data-transition (2nd button)
  • If a Dialog is launched by data-rel="dialog", again only slide transition works (not the default pop), even if you specify data-transition="pop" (4th button)
  • If a Dialog is launched using data-role="dialog", then the transition used is "pop" and any value set in the data-transition attribute is ignored (6th button)
  • If a Dialog is launched using data-role="dialog", setting the data-rel="dialog" might not be required (7th button)

It is not yet clear if the above behavior is as expected and implemented so, and if only the documentation of jQM needs to be updated. Or maybe JQM should ignore data-ajax="false" in a multi-page template scenario. I have now logged a bug against jQuery Mobile and await feedback on the same

No comments:

Post a Comment