What does the data-url attribute do in jquery mobile?

Question

Trying to figure out the basic structure of a page and came across a blog that had the data-url attribute. What exactly does this mean?

Answer 1

That attribute serves to identify pages that are auto-generated by jQM. From the jQM docs:

...Pages that are auto-generated by plugins use the following special data-url structure: <div data-url="page.html&subpageidentifier">

So, for example, a page generated by the listview plugin may have an data-url attribute like this: data-url="artists.html&ui-page=listview-1"

When a page is requested, jQuery Mobile knows to split the URL at "&ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&ui-page=listview-1 ...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the div with data-url="artists.html&ui-page=listview-1", which it will then display as the active page.

Note that the data-url attribute of the element contains the full URL path, not just the portion after &ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page data-url attributes.

Answer 2

The data-url attribute also serves to update the hash when using redirects or linking to directories. Check out the Redirects and linking to directories section.