how to navigate in a mobile app without reloading all resources?

Question

Considering that the mobile app is not native, but made with phonegap (or something simmilar), i am wondering if there is a javascript / jquery library that i can use to navigate from one html page to another one without the need to reload all ls and css resources.

More or less like jQuery Mobile does it.

One issue would be enhancing all the ui and js widgets on each page

Any ideas?

Answer 1

You can do an AJAX call to whatever the local URL is and wrap the entire response in something traversable via jQuery, like...

// on click link ->
$.get('myUrl.html', function(response) {
    var new_body, traversable;

    traversable = $('<div></div>', {
        html: response
    });

    new_body = traversable.find('body').html();

    // code to replace your content here ...
});

And if you have a lot of scripts/styles running per page, you could traverse through the list of traversable.find('link') and traversable.find('script') to compare what has and has not been used yet. Then append to the document after replacing your markup.

Answer 2

I think it is Phonegap you are talking about.

Yes, Jquery mobile is would be a solution to your problem because whenever we change the page in Jquery Mobile, instead of reloading the whole DOM, it only replaces/inserts (depends on if you enable caching) the new page div to be shown.

Thus, all resources you included initially would persist and be usable in all pages.

Answer 3

Depending on how your html and css are written, you could wrap your pages in divs and use css transforms to position them off screen, then scroll them into view when the user clicks a link.

jQuery mobile inside of phonegap is very, very slow.