I've used jQuery for many situations, but never quite come on the situation I'm in right now.
I'd like to use jQuery-UI functionality on a small portion of my page, but I need the rest of the page, in particularly the links and buttons, to remain untouched by jQuery-UI. In particular, I can't have the additional classes "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only " automatically added to every link on the whole page. I just want those limited to a certain DIV of the page.
Page 2,3) The results pages - one a list, the other a map
Page 4) A details page for an individual property
I'm 99% done, but can't seem to properly maintain state across multiple platforms.
The desired result is that every time the user goes "forward" in the application, the target page is populated with new data (json from a RESTful API). But when the user goes 'back', the previous page is exactly as they left it.
Currently, all the JS code is included within the data-role="page" div as opposed to the header. And currently I'm using live('pageshow') for each page to trigger the updates.
One complication is that the App needs to function with Request Parameters, since end-users will be pushed directly to specific properties or groups of such via print advertising & QR codes. Also, because of this, it makes sense (at least to me) to keep the app as separate pages instead of putting all the functionality in a single page.
I've tried every combination of 'live' vs 'bind' and 'pageshow' vs 'pageinit', but still can't get the application to work for Android. iOS seems to work fine, but not Android.
In particular, I run into the "...pageinit fires multiple times...' problem.
I've read the docs, but they don't seem to apply to a dynamically-updated multiple page architecture.
Can anyone point me to the 'correct' way to handle this type of architecture?