How do I load external Javascript files using `paginit` in jQuery Mobile?

Question

The scroll bar is not loading up unless I hit refresh. I assume this can be fixed using jQuery Mobile's pageinit. This is what I tried:

$('#summaryPage').live('pageinit', function(){
$.getScript('cubiq-iscroll-bad88fb/src/iscroll.js');
});

No dice. Any ideas?

score 2 · Accepted Answer · answered Dec 18 '12 at 11:16

var jsonp = document.createElement("script");
            jsonp.type = "text/javascript";
            jsonp.src = "cubiq-iscroll-bad88fb/src/iscroll.js";
            document.getElementsByTagName("body")[0].appendChild(jsonp);

this should work fine.If the .js works w/o error.Hope this helps.

score 1 · Answer 2 · answered Dec 14 '12 at 12:59

1

You can try:

<script>
$('#summaryPage').live('pageinit', function(){
   var oHead = document.getElementsByTagName('HEAD').item(0);
   var oScript= document.createElement("script");
   oScript.type = "text/javascript";
   oScript.src="other.js";
   oHead.appendChild( oScript);
});
</script>

answered Dec 14 '12 at 12:59

grigno

3,128
4
35
47

I tried this with no luck. I changed "other.js" to my "script.js" and pasted it in two separate heads and navigated between them. I also just pasted it in script.js, but nada. Thanks tho. – Squirrl Dec 16 '12 at 17:14
Please see edited answer, maybe you are listening to the wrong event altogether. Please accept/upvote if it helps – iOSAndroidWindowsMobileAppsDev Dec 23 '12 at 17:06

iOSAndroidWindowsMobileAppsDev · Answer 3 · 2012-12-23T17:21:19.260

since .live will be deprecated you can also

$(document).on('pageinit', '#summaryPage', function(){
    //append head element and custom script 
});

It could also be that you are loading your scripts way too late, naturally if I were you I would do it immediately as soon as the document and/or device is ready, and then when the page inits check if the element exists and if not, trigger create. There are also events you could listen to in jquery mobile API e.g. pagebeforecreate

Or better yet still put the code in a global function without a name:

function(){
//append your script here  
}

you can read up the documentation on jquery.com in the API

score 1 · Answer 4 · edited May 23 '17 at 12:33

1

Try to run it before page shows:

$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    $.getScript('cubiq-iscroll-bad88fb/src/iscroll.js');
});

jQuery mobile $(document).ready equivalent

edited May 23 '17 at 12:33

Community

1
1

answered Dec 23 '12 at 04:08

Alex G

3,048
10
39
78

.live() is deprecated, so it probably best to avoid using it. – JacobRossDev Aug 14 '13 at 17:59

How do I load external Javascript files using `paginit` in jQuery Mobile?

4 Answers4