Today I had an issue with html duplication when using jQuery mobile and ajax.
What was the issue?
The problem was that when a user submits a particular page, on the new page that loads, the previous page’s html was still visible in the code of the page. Although it wasn’t visible on the new page, it was causing some problems with automatic tests which was finding different controls with the same IDs.
Resolution:
The problem was that the source page didn’t have this attribute in the page element:
data-external-page=”true”
After searching for a solution and trying out a few things, I found this solution which worked perfectly. Just insert the following script at the top of the page and it solved my issue:
var first = true;
$(document).bind('pageinit', function (event) {
var page = $(event.target);
if (first) {
page.attr("data-external-page", "true");
$.mobile._bindPageRemove.call(page);
first = false;
}
});
Hope you found this helpful. Happy Resoluting!
Resources
No Responses