Function call fail to external script referred by page loaded with Ajax

L

lovecreatesbeauty

I want to use an individual function to load a page in ajax way.

If that page refers to external script files, the function calls to
the external script fail at the first round only:).

If I put a similar alert() call for example in the following code at
line no. 28, then those function calls to external script won't fail.

Why it ever failed? It didn't get enough time to load the external
script or what? But an alert() gives it the time? I tried using
setTimtout with no lucky.


/* ajax(elmId, method, url)
* Ajax function with javascript on loaded page enabled
* with code stolen online
* jhlicc@{gmail,hotmail}.com, 20110626
*/
function ajax(elmId, method, url)
{
var xhr, elm;

xhr = new XMLHttpRequest();
elm = document.getElementById(elmId);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var s1, n1;

elm.innerHTML = xhr.responseText;
s1 = elm.getElementsByTagName("script");
n1 = s1.length;
for (var i = 0; i != n1; i++){
var s2;

s2 = document.createElement("script");
s2.type = "text/javascript";
if (s1.src) s2.src = s1.src;
if (s1.text) s2.text = s1.text;
elm.appendChild(s2);
if (s1.src){
/*Line#28*/ alert(src_appended);
}
}
for (var i = 0; i != n1; i++){

elm.removeChild(elm.getElementsByTagName("script")[0]);
}
} else {
elm.innerHTML = xhr.status + " " + xhr.statusText;
}}}

xhr.open(method, url);
xhr.send();

}


Thank you for your time
 
L

lovecreatesbeauty

I want to use an individual function to load a page in ajax way.

If that page refers to external script files, the function calls to
the external script fail at the first round only:).

If I put a similar alert() call for example in the following code at
line no. 28, then those function calls to external script won't fail.

Why it ever failed? It didn't get enough time to load the external
script or what? But an alert() gives it the time? I tried using
setTimtout with no lucky.

This time I get problem referring and calling the external script in
both jQuery way and my own function on latest FF, IE and Chrome on
Windows XP. The jQuery way works on latest FF on Fedora. But I use
jQuery to handle this case successfully on other modules.

$ ls 201110625*
20110625-2.html 20110625.css 20110625.html 20110625.js
$
$
$ cat 20110625.html
<html><head>
<script src="http://www.cyberspace.org/~jhl/ajax.js" type="text/
javascript"></script>
<script src="http://code.jquery.com/jquery.min.js" type="text/
javascript"></script>
</head><body>
<input type="button" value="ajax() demo!" id="input1"
onclick='ajax("div1", "get", "20110625-2.html")' />
<a href="http://www.cyberspace.org/~jhl/ajax.js">ajax() source</a>
<br>
<input type="button" value="jQuery demo!" id="input2" />
<div id="div1"></div>

<script>
$(document).ready(function(){

$("#input2").click(function(event){
$.ajax({type: "GET", url: "20110625-2.html",
success: function(html){ $("#div1").html(html); },
error: function(html){ $("#div1").html(html); },
complete: function(html){ $("#div1").html(html); }
});
});

});
</script>

</body></html>
$
$
$ cat 20110625-2.html
<html><head>
<link type="text/css" rel="stylesheet" href="http://www.cyberspace.org/
~jhl/20110625.css" />
<script type="text/javascript" src="http://www.cyberspace.org/~jhl/
20110625.js"></script>
</head><body>

<script type="text/javascript">f_20110625();</script>
<span class="bg_color">hello world</span><script type="text/
javascript">alert("hello world.");</script>

</body></html>
$

$ cat 20110625.js
function f_20110625()
{
alert("hello. function");
}
$
$
$ cat 20110625.css
..bg_color{
background-color:lightgray;
}
$
$
 
L

lovecreatesbeauty

<input type="button" value="ajax() demo!" id="input1"
onclick='ajax("div1", "get", "20110625-2.html")' /> ....

<script>
$(document).ready(function(){
$("#input2").click(function(event){
$.ajax({type: "GET", url: "20110625-2.html",
success: function(html){ $("#div1").html(html); },
});
});
});
</script>

In the jQuery version the external js function called after ready
detected. I tried onload event with my version, but it still fails.
<script type="text/javascript" src="http://www.cyberspace.org/~jhl/
20110625.js"></script>

<script type="text/javascript" src="20110625.js"></script>

I removed the the url part before the filename, and the jQuery version
works.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top