Copy the full code of this recipe from the code/02/data-url sources folder. You can launch this code using the URL http://localhost:8080/02/data-url/login/main.html.

The steps to be followed are:

Each of the pages in the previous code listed also displays the page URL of the current page just below the page header. Keep an eye on this text, and compare it with the address shown in the browser address bar as you navigate through the pages in this recipe.

First, create the login and records folders. In the login folder, create the main.html file, which is a multi-page document. Add the #main and #login pages to it. In the #main page, add a Login to Records folder button to open the #login page. Next, create the #login page, and specify its data-url attribute as http://localhost:8080/02/data-url/records. Add an Open the Index Page button to this page, to open the index.html file located in the records folder. Now, when you launch the app and click on the login button, the #login page is shown. But the browser address bar will show the URL as http://localhost:8080/02/data-url/records/, as shown in the following screenshot. Whereas the text above the Go to Index Page button still says that the current page location is login/main.html #login.

This redirect occurred because the data-url attribute was used in the #login page div container. The jQuery Mobile framework updates the address bar with the value of this attribute instead of the actual URL used to fetch the page.

This is a very handy feature that allows you to perform redirects in your app. This recipe does not show the username or password being validated by the server. But in real life, the user would enter the username/password credentials in the #main page and on a successful response from the server, you can redirect the user to restricted folders and webpages. Do not redirect any unauthenticated users, and they will not be able to access any pages in the records folder.

Next, add the index.html and records.html files as given in the code. Add links to these pages to enable navigation between them. Now, in the #login page, when you click on the Open the Index Page button, the href attribute only specifies index.html in the code. But since the redirect has already occurred at this point, the index.html file from the records folder is opened. The index.html file is now the landing page here and allows you to access other pages, such as data.html, which are all located in the records folder. An alternate approach to using data-url is that you could also use the changePage() method to redirect the user to the index.html page on a successful login.

In index.html, set the data-url="http://localhost:8080/02/data-url/records" attribute to support proper navigation when the user clicks on the back or forward buttons of the browser, If this is not done, navigation will break if you click on the back button in index.html. data-url helps you set the correct value on the history stack.

You can play with the back and forward buttons of your browser to see how the address bar is updated when compared to the text shown below the header as you navigate through the app.

jQuery Mobile sets and maintains the data-url attribute for all the pages in your app. Only the first page of your app does not require data-url, as it is always available in the DOM and can be referenced by its ID or URL. For all other pages, if the data-url attribute is not specified, it gets added with the value of the page ID by default. For external pages in the same domain, the relative path of the page is used as the value for data-url. For pages from different domains, the absolute path is used.

data-url="page.html&ui-page=subpage"