PDA

View Full Version : Document.write your Ajax includes



molendijk
03-10-2010, 09:21 PM
1) CODE TITLE: Document.write your Ajax includes

2) AUTHOR NAME: Arie Molendijk

3) DESCRIPTION:
In this DD tutorial and resulting discussion (http://www.dynamicdrive.com/forums/showthread.php?t=19247) 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 (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) 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 (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm) 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:

<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 (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm)")</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/include_ajax_methods_docwrite/include_ajax_methods_docwrite.html