"data-url" jQuery Mobile confusing

Question

Can Anyone put more some light on "data-url" attributes in jQuery Mobile currently I read the documentation I found it too confusing does any has a working demo or something.

Please avoid Copy pasting the the content from jQuery mobile website it can definitely help some one else looking out for same in same state of confuse like I am .

Answer 1

You are looking at a rather old link of the documentation. The latest version of the documentation has more information about the purpose of the data-url attribute. You can check out the new 1.0 version on the relevant page at the following link: http://jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html

I really honestly believe that the documentation, especially the 1.0 documentation, will explain this better, but I will attempt anyway: In order to really understand the data-url attribute, you need to understand the jQuery Mobile model of combining all of your HTML pages into a single HTML document for your mobile website. These pages are generally loaded lazily into the same document. When you navigate to the HTML document with jQuery Mobile loaded on the page, the HTML will be parsed, and only one "page" will be displayed.

The data-url is an attribute that you put on a jQM page in order to enable Ajax navigation. When you click on a link, the jQM navigation will first look for a matching data-url attribute on a page. For instance, if you browse to jQM-enabled page that has a URL of "example-host/some/path#/features/123", jQuery Mobile will first look on the current document for a jQM page that has the attribute data-url="/features/123". If it finds it, then it hides the current jQM page and displays the one it found. If it doesn't find it, then it attempts an Ajax request to the URL "example-host/features/123", loading the contents in as yet another jQM page if it finds a valid page.

These jQM documentation links should provide further help:

Anatomy of a Page

jQM Page Model

Answer 2

There's an additional very important use-case for data-url - which is during redirects :

Let's say a user navigates to /store/youraccount but they're not logged in. Your server will probably redirect them to a login page /store/login. This comes back to the browser as a 301 redirect which is loaded without jQuery Mobile even knowing about the change. The page will display correctly but the URL at the top will still be store/youraccount.

By setting data-url on the login page like this, jQuery mobile can correctly update the URL after a redirect which means it can be bookmarked and <form> tags without action specified will work.

How data-url stops <form> from breakings:

If your page contains a <form> tag defined without an action attribute then the default behavior is to post back to the current page - yup you guessed it the browser still thinks we're on /store/youraccount

So when you put data-url='/store/login it can correctly update the URL.

<div data-role="page" data-url="/store/login" 
     class="ui-page ui-body-c ui-page-active" id="page_">

Note: even if your form has an action you will still need to set data-url. THis is just an example to show how leaving off data-url can break things.