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

Question

So I am having a hard time getting $.mobile.changePage to function properly. I call it like this:

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

But for some reason, when the HTML page is loaded, none of the external .js (the files that I wrote to actually do something) are included. I am following the significant loading conventions of

-Jquery
-(CUSTOM JS)
-Jquery Mobile

Does anyone know why this is not getting loaded properly? Also, the pageshow function is not getting fired either, which is strange. It looks like this:

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

Now the page is rendered, but none of the functional things happen. If I hack it and do something like this:

document.location.href="DataformsM-AddRecord.html";

It will function properly.

Jasper · Accepted Answer · 2012-07-10T21:33:23.533

44

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.

edited Jul 10 '12 at 21:33

answered Sep 16 '11 at 19:56

Jasper

75,717
14
151
146

This actually did the trick loading the external JS files. I am going to write a supplemental answer to further explain what I did to get it working 100%. I still feel it is a hack, but as of now, it looks good. – gabaum10 Sep 19 '11 at 16:56
@Jaspar in response to your "Update", is there a way to create a universal include file, with all of your **CSS** and Javascript includes? Thanks – Apollo Aug 02 '12 at 02:55
@Derek You could do a server-side inclusion of a file that included both the CSS and the JS. But it's pretty easy to just use a `` and a `` tag to put your external CSS and JS on each document. – Jasper Aug 02 '12 at 15:43

gabaum10 · Answer 2 · 2011-09-19T17:11:23.910

So building off of what Jasper so wisely noted above, I came up with a working solution.

Basically I Load up all of my JS and CSS files into the index page to start. Now when you load, this method will be triggered for the pageshow

$("div[id*='page1']").live('pageshow', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    doStuffWhenPageintializes();
});

Once I call the $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, the pagehide method will get fired for the page1 object. This is where you can trigger the method to initialize the page you are transitioning to.

$("div[id*='page1']").live('pagehide', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    loadStuffForNewPage();
});

Now you can remove the document.location.href="external.html" line and simply use the native JQM call. Hope this helps some people.

You can also use pageInit() for each page you load. – Daniel Bang Apr 13 '12 at 22:09 — Daniel Bang, Apr 13 '12 at 22:09

score 1 · Answer 3 · edited Apr 29 '13 at 09:32

1

Kindly repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will re create head section...

a simple change page like this would then work:

$.mobile.changePage('abc.html', {
    transition: 'slide'
});

edited Apr 29 '13 at 09:32

Jens Erat

37,523
16
80
96

answered Apr 29 '13 at 09:13

Sheetal

1,368
1
9
15

score 0 · Answer 4 · answered Aug 11 '12 at 06:20

It seems that there is no "right" way provided by JQM to load external html files. Thanks a bunch to Jasper for the solution.

JQM suggests an AJAX reload if we want to switch to external pages, like:

<a href="foo.html" rel="external">

or

<a href="foo.html" data-ajax="false">

I tried both but they didn't work - I"m programming for native apps, so maybe it may work for web apps?

score 0 · Answer 5 · answered Jan 09 '13 at 10:33

I solved this by putting script in the head section of last loaded page that helped and worked for me. JQM is not getting the head section of recently loaded page in the DOM so not bringing the JS content of the recent page. By putting all the script in an External JS file or by putting it in the head section of very first page might do the trick for you.

score -1 · Answer 6 · edited Jan 07 '13 at 10:24

-1

I too am looking for this solution the "correct way" for loading external pages. However, I will concur, that your hack does indeed work. I'll take the hack for now:

    $(document).ready(function(){
    $("#page1").bind('ended', function(){
        $.mobile.changePage($(document.location.href="external.html"), 'fade');
  });
});

edited Jan 07 '13 at 10:24

answered Sep 17 '11 at 21:06

codewarrior

19
3

Does this actually do the transition when you do this? – gabaum10 Sep 19 '11 at 14:25
2

Because my page is loading, but I am getting a `toPage.data("page") is undefined` error in the JQM file. I think there is something missing... – gabaum10 Sep 19 '11 at 15:00
please see the solution that I posted based on Jasper's answer above. – gabaum10 Sep 19 '11 at 17:11
No, the transition does not work. I'm trying to sort that one out. It may have to do with the $(document).ready.(function), because I've read that that should be avoided with JQM. – codewarrior Sep 20 '11 at 22:59
I figured out that the transition DOES work, just not in FF. For some reason it doesn't like the transitions. Try it on another browser. :) – gabaum10 Sep 21 '11 at 18:29
I was testing in Safari and Chrome and didn't work, however I tried out your updated code and worked like a charm! However, I don't understand the pagehide event. – codewarrior Sep 22 '11 at 03:04
Basically the pageshow/hide events get fired when whatever JQ object you have set to gets hidden/shown. It is very similar to the different events that get fired to delegate methods in native iOS applications. Check out more here: http://jquerymobile.com/test/docs/api/events.html – gabaum10 Sep 22 '11 at 15:19

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

6 Answers6

Linked

Related