How do I load files into multiple DIV layers using AJAX?

Discussion in 'JavaScript' started by Cianz, May 17, 2008.

0
  1. #1
    I want the page to load multiple external PHP files into multiple DIV layers, however no matter what I try I can only get one DIV layer to load when the page is first loaded. If you refresh however, both DIVs will load. Very weird!

    All the JavaScript is in the source -- any help is very much appreciated!!

    http://www.getbweb.com/vidsite/
     
    Cianz, May 17, 2008 IP
  2. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #2
    Can you please be more clear on where it is and is not loading? thanks :)
     
    crath, May 17, 2008 IP
  3. Cianz

    Cianz Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi everyone - thanks to John at Dynamic Drive forums I have a solution. Here it is for anyone stuck with the same problem I had.


    JavaScript:

    function loadXmlHttp(url, id) {
var f = this;
f.xmlHttp = null;
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {f.ie = window.ActiveXObject}catch(e){f.ie = false;}
@end @*/
if (window.XMLHttpRequest&&!f.ie||/^http/.test(window.location.href))
f.xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
f.xmlHttp = createRequest(); // ICEBrowser, perhaps others
else {
f.xmlHttp = null;
 // Internet Explorer 5 to 6, includes IE 7+ when local //
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{f.xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){try{f.xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){f.xmlHttp=null;}}
@end @*/
}
if(f.xmlHttp != null){
f.el = document.getElementById(id);
f.xmlHttp.open("GET",url,true);
f.xmlHttp.onreadystatechange = function(){f.stateChanged();};
f.xmlHttp.send(null);
}
else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}


loadXmlHttp.prototype.stateChanged=function () {
if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !/^http/.test(window.location.href)))
	this.el.innerHTML = this.xmlHttp.responseText;
}
    Code (markup):
    Usage:

    new loadXmlHttp('requested_url', 'target_element_id')
    Code (markup):
     
    Cianz, May 17, 2008 IP