JQM page id and data-url - jquery-mobile

Question

What is the relation between page id and data-url attribute. Is there any relation. Is it fine to change the data-url attribute.
My issue is that there is a page to which i pass the params using changePage. I also specify the data-url in changePage. After going to that page, if i manually refresh the page a new page is added since the data-url is different for that page. That is, the data-url becomes same as the page id. Hope that am clear on this. What should i do so that the page is replaced during manual refresh of page.
And, can someone please explain how JQM uses page id and data-url. Thanks in advance.

Answer 1

The data-url attribute is used to track the origin of the page element. If it is not explicitly set, the pages embedded within the main application document all have their data-url attribute equal to the page id. The only exception to this is the first-page in the document. When you're requesting a page, then jQuery Mobile firstly tries to locate a page with a matching data-url in DOM. If it does not find a such page then it performs an Ajax request and loads the new page in DOM.
You can solve the issue using one of the below 3 ways:
Use the below code to remove the second page from DOM when you're moving to another page.
$(document).on('pagehide', '#second-page', function(event, ui){
$(event.target).remove();
});
This way when you're moving to the first page, the second page will be removed from DOM and your issue will be solved.
OR:
Use:
$.mobile.changePage('car-details.html', {
data: {
id: this.id
}
});
without using the dataUrl setting.
This creates a URL: ../car-details.html?id=my_val
On refresh the URL remains the same so you can still get the parameters and the data-url is the same as the page id.
OR
Before changePage() check whether a page with data-url equal to the second page's id exists in DOM and remove it manually.
if ($("#second-page-id").length > 0 && $("#second-page-id").attr("data-url") === 'second-page-id' ) {
console.log('remove from DOM');
$("#second-page-id").remove();
}