How to split pages in jQuery Mobile?

Question

I am doing some tests with jQuery Mobile and trying to figure out how to configure the application and its various pages. Ideally, I would like the structure to load pages with transitions, but still keep each page clearly separated. In particular, it seems that the page loaded through Ajax does not "clear" the JavaScript or CSS of the previous page:

Example 1 - JavaScript

For example, if I have something like this in page1.html :

 <script> setInterval(function() { console.info('Interval' + (new Date())); }, 1000); </script> 

Then, if I load page2.html , the interval is still running. If I go back to page1 , a new interval will start, so now there will be two intervals, 3 and 4, etc. Every time I go back to page1 .

Example 2 - CSS

Another issue is styling. Say two developers working independently on two different pages create a my-element . In page1 this element has the style:

 <style> #my-element { color: red; } </style> <span id="my-element">This one is red</span> 

in page2 , the item is not styled:

 <span id="my-element">This one has no style</span> 

Again, if I go first to page1.html and then page2.html , my-element will turn red, although it was not created in page2.html .

So, I have two questions:

• Currently, it seems that jQuery Mobile's approach to page loading is not scalable at all. CSS, JS created on one page goes to the next. So there is a way to make jQuery Mobile “loaded” pages clean. that is, to completely remove everything from the previous page so that the JS or CSS bits do not affect the next page?

• If not, what is the correct way to work with multiple pages in a scalable manner in jQuery Mobile?

Answer 1

the behavior you describe makes JQM work. your DOM is saved (including the js and css of the first page loaded) until you load the page with "data-ajax = false" or "rel = external", which will perform a regular page load (without ajax).

When loading a page through ajax, you will basically have at least two pages in the DOM - the page on which you started (for example, on the anchor page), and on any other page that you load through ajax (which is deleted after the next page is loaded) .

this approach allows you to have transitions and other functions that you can share between pages.

nevertheless you can easily orient certain pages using js / css. I always run the controller.js file in my applications, which processes specific pages, binding to any of the JQM events (pagebeforeshow, pageshow ...). Similarly, for a css page, use the page id attribute to make the css page specific.