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

Discussion in 'Javascript' started by lovecreatesbeauty, Jul 16, 2011.

  1. 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 16, 2011
    #1
    1. Advertisements

  2. 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
    #2
    1. Advertisements

  3. 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="20110625.js"></script>

    I removed the the url part before the filename, and the jQuery version
    works.
     
    lovecreatesbeauty, Jul 20, 2011
    #3
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.