SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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/

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should seperate your ajax. At the moment you have a global parent and xmlHttp variable which would work for one call, but as soon as you do more then one call, it will overwrite the first, and so on.

    You should create a single ajax object for each call, and then pass the parent object as a parameter, ie

    Code JavaScript:
    function openInMain(file) {
        var xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null) {
            alert ("Your browser does not support AJAX!");
            return;
        }
        var url="http://www.getbweb.com/vidsite/" + file;
        xmlHttp.onreadystatechange = function() {
            stateChanged(this, document.getElementById("main"))
        };
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
    }
     
    function stateChanged(xmlHttp, Parent) {
        if (xmlHttp.readyState==4 && xmlHttp.status == 200)    {
            Parent.innerHTML = xmlHttp.responseText;
        }
    }


  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the help gRoberts, we ended up getting the code running with similar code to what you've posted. In the end I was provided with some much better code which i've included below.

    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:

    Code:
    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;
    }
    Usage:

    Code:
    new loadXmlHttp('requested_url', 'target_element_id')


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
  •