Dynamically loaded <script> tag not being used in WebKit browsers

Question

It seems this is a known problem and has been asked several times before here in SO however I do not see anything specific to jQTouch so I thought I would give it a try.

jQT will dynamically load pages when a link is clicked. In this page I would like to include something like

<script>
$.include('javascriptfile.js', function() {alert('do something with results of this file to an already existing div element');};
</script>

The $.include is a jquery plugin I found that mimics the $.load with a few more smarts added to it. Tested to work on FF but not in Chrome or most importantly, Safari.

The alert is never displayed. FireBug never shows the javascript even being loaded. If I put an alert before the $.include I still do not see anything.

I have tried an onclick/ontap event that would then run this code that was included in the head tag, no luck.

Edit: I am using the r148 revision of jQT. This was working prior to moving to this version, i believe.

Answer 1

Did you try to add the javascript file using one of these two methods:

Static Way:

<script type="text/javascript">

function staticLoadScript(url){
   document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}

staticLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());

</script>

Dynamic way:

<script type="text/javascript">

function dhtmlLoadScript(url){
   var e = document.createElement("script");
   e.src = url;
   e.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(e);
}

onload = function(){
   dhtmlLoadScript("javascriptfile.js");
   modifyDivFn(processFnInFile());
}

</script>

After the include you can call a function that does the processing you want (that being processFnInFile()) which result will be passed to modifyDivFn (and modify the div you want.) You could do this in one function, just to illustrate the idea.

---

Source: Dynamically Loading Javascript Files

Answer 2

Well Geries, I appreciate your help but ultimately the answer required a drastic rethinking of how I was using JQTouch. The solution was to move everything to an onclick event and make all the hrefs link to #. This might be what you were talking about Geries.

In the onclick function I do the logic, preloading, loading of the page through my own GET through jquery, then use the public object jQT.goTo(div, transition). This seems to get around the WebKit bugs or whatever I was running into and this now owrks on FireFox, Chrome, Safari, iPhone, and the lot.

I do run into a few animation issues with JQT but I think these are known issues that I hope Stark and the gang at JQTouch are working on.

Answer 3

Hi Luke,

I am also trying to do the same thing. Is it possible to show some example code for your solution please?