javascript - JQuery Mobile Change Page doesnt load JS files

Question

In an effort to better organize our JQuery Mobile PhoneGap application I would like to be able to use tags on the new page and have that JS come in when the page is brought in, with changePage or something other.

So far, my efforts to do this have not yielded what I am looking for. Unless I include all JS files on index.html and then write conditional logic in the PageShow event handler, which is not a good solution.

Any thoughts?

Answer 1

To introduce new JS includes to pages loaded (via AJAX) with jQuery Mobile you must have the references to those files within the data-role="page" or (data-role="dialog") elements of each page because jQuery Mobile does not process anything outside of those elements during AJAX page loads.

Alternatively, you could use JavaScript to create the new script tags dynamically on the 'pageshow' event of each page transition. Something like this:

$(document).on('pageshow', 'div[data-role*="page"],div[data-role*="dialog"]', function () {
     (function () {
        var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
        script.src = '/path/to/new/include.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
    })();
});