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

lovecreatesbeauty · Jul 16, 2011

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

lovecreatesbeauty · Jul 19, 2011

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;
}
$
$

lovecreatesbeauty · Jul 20, 2011

<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>

Code Review: Ajax function with javascript on loaded page enabled	12	Jun 25, 2011
Script in AJAX-loaded page inside parent page not firing	2	Sep 11, 2009
responseText	9	Apr 17, 2011
Help with my responsive home page	2	Dec 14, 2022
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
JavaScript ajax library critique	84	Dec 22, 2009

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

lovecreatesbeauty

lovecreatesbeauty

lovecreatesbeauty

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads