Results 1 to 1 of 1

Thread: Document.write your Ajax includes

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default Document.write your Ajax includes

    1) CODE TITLE: Document.write your Ajax includes

    2) AUTHOR NAME: Arie Molendijk

    3) DESCRIPTION:
    In this DD tutorial and resulting discussion on retrieving data from another page (on the client, using Ajax), no mention is explicitly made about a very specific problem resulting from using innerHTML in the request (...innerHTML = ....responseText): once the (main) page has finished loading, we cannot properly run the javascript that was inserted. Apparently, the common belief was & is that this can be done 'afterwards' in some way or another. But it cannot. I mean: it cannot be done in a solid way for all includes. Modern DOM techniques for bringing in external code may work in a number of cases, but they will fail in other cases. For instance, this DynamicDrive script for dynamically importing the codes (afterwards) belonging to an external file (included with Ajax using innerHTML) partly accomplishes the job - using appendChild - when applied to this menu in Firefox and Flock (and presumably certain other browsers). But it completely fails in IE, Opera and Chrome (if applied to this menu). Note that using appendChild instead of innerHTML in the request itself, like this:
    Code:
    <head>
    <script type="text/javascript">
    function HttpRequest(url){
    var pageRequest = false //variable to hold ajax object
    /*@cc_on
    @if (@_jscript_version >= 5)
    try {
    pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
    }
    catch (e){
    try {
    pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e2){
    pageRequest = false
    }
    }
    @end
    
    @*/ if (!pageRequest && typeof XMLHttpRequest != 'undefined')
    pageRequest = new XMLHttpRequest()
    
    if (pageRequest){ //if pageRequest is not false
    pageRequest.open('GET', url, false) //get page synchronously
    pageRequest.send(null)
    
    var newdiv = document.createElement("div");
    newdiv.innerHTML = pageRequest.responseText;
    if(/*@cc_on!@*/false)
    {newdiv.innerHTML.text= newdiv.innerHTML;}
    document.body.appendChild(newdiv);
    
    }
    }
    
    </script>
    
    </head>
    <body >
    <script type="text/javascript">HttpRequest("anylinkcssmenu.html")</script>
    </body>
    will not automatically bring in (all) the external code if we use IE, Opera or Chrome (although it does when we use Firefox and Flock).

    After a lot of testing, I'm convinced that the only thing that seems to work in all cases (except one, see link below) is good (and bad) old document.write. It does not only bring in the text of the external file, but also - automatically - ALL its code. So we should consider using it when doing Ajax includes: document.write(...responseText). This raises the problem of how to dynamically update a page that has already finished loading. It cannot be done with document.write itself, since document.writing to a page that has finished loading wipes out its entire existing content. But we can fake it. That's what I propose to do in the URL_TO_CODE below. (Don't tell me it's a horrible workaround. I already know that).

    4) URL TO CODE: http://www.let.rug.nl/molendyk/inclu..._docwrite.html
    Last edited by molendijk; 03-11-2010 at 10:00 AM. Reason: Correction

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •