Skip to main content

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:
Launch


<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile Transitions Demo with data-ajax="false"</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  </head>
  <body>
    <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>
    </div>
    <div data-role="page" id="page2">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse">Back</a>
      </div>
    </div>
    <div data-role="dialog" id="page3">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse">Back</a>
      </div>
    </div>
  </body>
</html>


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 https://github.com/jquery/jquery-mobile/issues/3296.

Labels:

Comments

Post a Comment

Popular posts from this blog

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesheet" href="dup.css" />  
9 comments
Read more

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi
19 comments
Read more

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t
16 comments
Read more