How to reload external javascript on page change using jquery mobile?

Question

I have couple pages within mobile version of the website which use google location services. I'm using changePage Ajax function to navigate through website pages. On first page load location services works properly , if I go to different page and go back it doesn't.

When I add rel="external" it works, but the problem is it reloads entire page which is not a big deal for desktop application, but doesn't look nice on mobile.

I tried to add reloadPage = true to changePage but it doesn't make any difference

Is there any way to reload just location services without reloading entire page?

Example:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script>

$("#btn-loc").click(function () {
        $.mobile.changePage("#btn-loc", { reloadPage: true }, { transition: "slide" });
    });

Answer 1

When you use reloadPage : true you have to reference the location of the external page, not the ID of that pseudo-page element:

$("#btn-loc").click(function () {
    $.mobile.changePage("/btn-loc.html", {
        reloadPage : true,
        transition : "slide"
    });
});

Also notice how I passed in the options object, there should just be one with all the properties you want to set in the single object.

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.

Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

Update

To add a script to the DOM via JS you can use Google's Analytics code:

<script>
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = '/path/to/my-file.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>