Geek Answers Handbook

Conflict with same identifier on different pages of a site using jQuery Mobile

I am making a mobile version of an existing site using a mobile request. The site has hundreds of pages with markup installed, which works great for the www version. The problem is that on every page there are many instances of the same element identifier, for example, #useername or #map or #photo. This is normal on www, as each page loads independently, so there is no conflict. In JQM, it seems that all pages are somehow cached together, and the code refers to the previous page. For instance:

page1.html

<div id="commonIdOnEveryPage">Page 1</div> <a href="page2.html">Link</a> <script> alert($("#commonIdOnEveryPage").html()); </script>

Page2.html

 <div id="commonIdOnEveryPage">Page 2</div> <script> alert($("#commonIdOnEveryPage").html()); </script>

After clicking the link from page 1 to go to page 2, the warning still shows “Page 1”.

In this example, it would be easy to change the identifier on the 2nd page, but on the site itself there are hundreds of places on different pages where the same identifier is used, and JS has thousands of lines. Of course, there is a way to make JQM compatible with this.

+4
source share
6 answers

I found this code that seems to remove the previous page from the cache, but retains the back button and transition.

 $('div').live('pagehide', function(event, ui) { $(event.target).remove(); });
+2
source

Instead, use a regular class, jQuery Mobile has several pages in the DOM at the same time, which makes your "unique" identifier not unique.

 $(".ui-page-active .commonclass").html()

Edit:

If the identifier cannot be unique, then the following:

 $(".ui-page-active div[id=commonid]").html()
+2
source

Tom Kinkaid's answer is pro-advice.

Just clearing it a bit to: 1) reduce the overhead of removing each div from the cache, and 2) update it with the new jQuery convention

 $(document).on('pagehide', '.ui-page', function(event, ui) { $(event.target).remove(); });

Now the cache is cleared from previous pages. The functionality of the back button is retained.

+2
source

By default , when you go to a page in JQM, the environment loads the contents of the page through ajax and attaches it to the DOM , so you get several identifiers per page. You can also link to the page to load the page usually via http , using either 'rel = "external" or data- ajax = "false", which, I think, should solve your problem, you need to make sure that the corresponding js files linked in the title of each page.

+1
source

Will use:

 $(document).ready(function(){ alert('#commonIdOnEveryPage'); });

to fix?

0
source

I create a unique string based on time and add it to all id.

 // unique string for use in DOM ids $unique = str_replace(array(' ', '.') ,'_', microtime());

Then in the html output:

 <div id="commonIdOnEveryPage<?php echo $unique; ?>">Page 2</div> <script> alert($("#commonIdOnEveryPage<?php echo $unique; ?>").html()); </script>
0
source

More articles:


All Articles