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

  2. Re: Function call fail to external script referred by page loadedwith Ajax

    On Jul 16, 2:13 pm, lovecreatesbeauty <>
    wrote:
    > 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
    #2
    1. Advertising

  3. Re: Function call fail to external script referred by page loadedwith Ajax

    On Jul 20, 11:57 am, lovecreatesbeauty <>
    wrote:
    > <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.
     
    lovecreatesbeauty, Jul 20, 2011
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael Tholkes
    Replies:
    2
    Views:
    426
    Yan-Hong Huang[MSFT]
    Jun 30, 2003
  2. Paul
    Replies:
    5
    Views:
    395
    Eliyahu Goldin
    Mar 16, 2006
  3. Jody Burgess
    Replies:
    2
    Views:
    552
    George Kinney
    Jul 17, 2004
  4. jeniffer
    Replies:
    12
    Views:
    794
    Jordan Abel
    Mar 29, 2006
  5. pbd22
    Replies:
    2
    Views:
    313
Loading...

Share This Page