Jquery Mobile - $.Mobile.Changepage Not Loading External .Js Files

Jquery Mobile - $.mobile.changepage not loading external .JS files

jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.

So any scripts in the <head> of the document will not be included.

I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.

Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.

UPDATE

A good system for this is to put all of your JS into an include file and include it on each page of the site. It will be ignored if pages are brought into the DOM by AJAX, but if someone refreshes somewhere in your site, the JS will be available.

JQM: $.mobile.changepage not loading external .JS file

try to put your <script src="../platform/dummy.js"></script>into the head instead of the body... and: you do not need type="text/javascript" charset="utf-8"anymore...

<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script src="../platform/dummy.js"></script>
    <script src="../common/jquery-1.7.2.min.js"></script>
    <script src="../common/jquery.mobile-1.2.0.min.js"></script>
</head>

JQuery Mobile Change Page doesnt load JS files

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);
    })();
});

Changes made from js files are not being rendered and cannot be debugged

I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.

Jquerymobile - $.mobile.changepage

Jquery mobile gets pages via AJAX and adds their content to the current page.
I saw some notices about changing the page title to the incoming one, so they are (planning?) accessing the head, but at the moment jquery mobile doesn't seem to load external js when loadin a page.

More importantly - if you use $(document).ready() it will not be triggered, because it was AJAX

jQuery Mobile ChangePage alternative

This answer was wrong and useless, so here's one that will actually help people...
- Jasper

Documentation: http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

Specifically you are looking for the reloadPage option:

reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. Used only when
the 'to' argument of changePage() is a URL.

So, something like this will work:

$.mobile.changePage('/some/url.html', {
    reloadPage : true
});

You can also bind to the pageinit event for specific pseudo-pages in order to run code specifically for those pseudo-pages:

$(document).delegate('#page-1', 'pageinit', function () {
    //run code for #page-1 pseudo-page
}).delegate('#page-2', 'pageinit', function () {
    //run code for #page-2 pseudo-page
}).delegate('#page-3', 'pageinit', function () {
    //run code for #page-3 pseudo-page
});

Then I would suggest putting all of the code for the whole site in a single .js include and include it in the or outside of any data-role="page" or data-role="dialog" elements of each document. This way the code for your site will always be present, no matter how the user has landed on the site or navigated around.

$.mobile.changePage($() always load changed web page

You can set the reloadPage option to true for the $.mobile.changePage() method. This will only work if you are loading an external page, not an internal one (multi-page template).

For Example:

$.mobile.changePage("some-external-page.html", {
    reloadPage : true
});

Documentation: http://jquerymobile.com/demos/1.2.0/docs/api/methods.html