SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ajax on panel load instead of onload?

    I am working on a website that has three main sections for information. a top Header with tabs, a Left column below that with a drop down list that changes depending on the tab chosen, and a main body clumn to the right of that.

    Writen in PrimeBase. Not my Choice.

    The Site needs to upldate when a link is clicked without reloading the whole page so I am using Ajax.

    The problem is that there are three layers of content. The header Div which swaps out the bottom Div which contains two seperate Divs. Of these the Left Navigation Div swaps out the Body Content Div.

    This is needed because there are two verisons of the bottom div and there are several versions of the Body Content.

    Code:
    var xmlHttp;
    var localWhereToPut;
    var ActiveXObject;
    
    function GetXmlHttpObject() { 
    	var objXMLHttp=null;
    	if (window.XMLHttpRequest)
    		{
    			objXMLHttp=new XMLHttpRequest();
    		}
    	else if (window.ActiveXObject)
    		{
    			objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}
    	return objXMLHttp;
    }
    
    function stateChanged() { 
    	if (xmlHttp.readyState===4 || xmlHttp.readyState==="complete")
    		{ 
    			document.getElementById(localWhereToPut).innerHTML=xmlHttp.responseText;
    			localWhereToPut = "";
    		} 
    } 
    
    function showInfo(pageToFetch,whereToPut) {
    	xmlHttp=new GetXmlHttpObject();
    	if (xmlHttp===null) {
    			alert ("Sorry you cannot run AJAX Applications.");
    			return;
    		} 
    	var url=pageToFetch;
    	localWhereToPut = whereToPut;
    	//url=url+"?q=";
    	//url=url+"&sid="+Math.random();
    	xmlHttp.onreadystatechange=stateChanged;
    	xmlHttp.open("GET",url,true);
    	xmlHttp.send(null);
    }
    The HTML for this looks like...
    HTML Code:
    <body>
    		<div id="header">
    			
    			<ul id="headerNav">
    				<li><a href="#" onclick="showInfo('overview.html','bottom')">User Overview Data</a></li>
    				<li><a href="#" onclick=",showInfo('user_displays.html','bottom')">User Display Options</a></li>
    			</ul>
    		</div>
    		
    		<div id="bottom">
    			Data Goes Here
    		</div>
    	</body>
    the bottom div content looks like...
    HTML Code:
    	<div id="leftContent">
    		<a href="#" onclick="showInfo('users.html','rightContent')">Users</a>
    		<a href="#" onclick="showInfo('groups.html','rightContent')">Groups</a>
    	</div>
    
    	<div id="rightContent">
    		Data Goes Here
    	</div>
    The problem is, how do I make the third layer display "on panel load" instead of onload?
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  2. #2
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have not been able to find an answere. It seams like there are a lot of down sides to using Ajax like this.
    For one, the back button on the browser won't go back one pannel when clicked, rather it will go to the previous page.

    Second You can't bookmark a panel.

    And third if you have a panel inside a panel, and the second panel needs to load when the first is clicked then you will have a problem. That is the reason why I am going to have to go back to using frames.

    But I think I can get away with using just two frames and then Ajax for two layers.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  3. #3
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can get around the first two problems using hash values (#foo).

    I don't quite understand the third problem.
    mmj

  4. #4
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I have a panel to be loaded inside a panel inside a panel, ie. three layers of functionality. Then the first set of tabs make the second set apear but there will be nothing under the second set of tabs unless you click on one of them. How do you make it so that it loads the default content into that third panel without having to click first.

    Basically like an onload would do. That doesn't work in this case because an onload only fires once and since the page is not technically reloading then it will not load.

    So what I have is a page with two sets of tabs but no content until you click one of the secondary tabs.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com


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
  •