0

I've got a website that I'm converting into an app using JQM. I've read about Pages and how the DOM loads but I'm still uncertain how to architect the site.

The main page of the application is based on the Google Maps API which uses JS to load. There are 150+ target pages so I don't want them to load until the user taps the link. All of the target pages also require JS to initialize. When they return to the main page the cached state should be the default but I also need the option to run JS if the query string changes. Content doesn't change often so my preference would be to cache data once loaded but there would need to be some way to flush the cache.

I converted the site to JQM. The target page JS didn't run so I added rel='external' to the links. The JS now runs on the target but when I link back to the main page it reloads the page without running initializing the JS. The obvious solution would be to add rel="external" but then I'd be defeating all performance value. Any recommendations on how I should structure it?

Lee
  • 13
  • 1
  • 3

1 Answers1

0

Using rel=external your links will not be loaded with Ajax and you will lose animated page transitions. If you want to run some script when a page displays, use this page event:

$(document).on("pageshow", "#selector", function(event, ui) { /* your code */ });

This and other useful events are described in jQuery Mobile API Documentation. For example, pagecreate (the now deprecated pageinit) is called once when the page initializes.

About getting query string parameters, see this answer.

Community
  • 1
  • 1
Sga
  • 3,608
  • 2
  • 36
  • 47