"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