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:
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).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>
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
CSS Codes
Reply With Quote
Bookmarks