Jump to content

Managing layouts and app with AJAX


judacoor

Recommended Posts

Hello,I'm having trouble trying to make a little app I designed work.It starts loading a normal page, where on the first time you enter it loads a PHP page that recieves a couple of parameters and, with an XlmHttpRequest I use the division tag (<div>.innerHTTP) to load the PHP into the <div> tag, and it works just fine the first time. The page loads, and I use onload="pageload()" to request the PHP I mentioned, that sets that page into the <div> with AJAX, right?But the problem is that I include some links in the PHP (set this way: <a href "test.php?param=2">) but after I load that PHP into the <div> using AJAX, everytime I click one of those links, the browser obviously takes me to a new page, where it opens the link I click.Now what I need, is that when I click one of those links the pageload() function activates, but sending a different parameter to the PHP, and sets it to the <div>, without loading a new pageHere's the code:mainMenu:<script type="text/javascript">function pageLoad(param){ xmlHttp=GetXmlHttpObject(); xmlHttp.onreadystatechange=function stateChange(){ if(xmlHttp.readyState==4){ document.getElementById("layout_left").innerHTML=xmlHttp.responseText; } } xmlHttp.open("GET","menuLeft.php?param=4",true) xmlHttp.send(null);/*I use the menuLeft.php to load diferent views of the same page, the param variable checks which one you need.*/}</script></head><body onLoad="pageLoad(4)">//I use the pageload() function, sending 4 as the parameter, which is the one that tells the PHP that its the first time the user logs in, and can send the correct info.<table id="layout_main" width="100%" height="100%"> <tr height="20%"> <td colspan="2"> <p align="center" class="style1">MAIN MENU</p> <p align="center" class="style1">USERS</p> </td> </tr> <tr align="right"> <td height="5" colspan="2"> <a href="logout.php" target="_self"><b>Log out</b></a> </tr> <tr> <td width="25%" bgcolor="#FF9900"> <div id="layout_left">//div tag for left part of the layout </div> </td> <td width="75%" bgcolor="#009933"> <div id="layout_right">//same div tag, for the rest of the screen </div> </td> </tr></table></body></html>So, if the PHP has something like this:<table id="menuLeft"> <tr> <a href="menuLeft.php?param=1"><b>User Menus</b></a> </tr></table>Then, when I click the link stated above (even if it is within the <div> in the mainMenu), it would obviously use a new page. So what I need is to make the mainMenu reload JUST the content of the <div id="layout_left"> using the PHP with another parameter. All the examples I've seen load something using AJAX, but they just load it once, I need to load stuff over and over again, without reloading.....THANKS A LOT!!!!PLEASE HELP ME!!!!!!!!!!!!

Link to comment
Share on other sites

If you have a link that references some resource with a URI, and you don't want the browser to leave the page you are currently on to load that resource, then you need to tell the browser that it shouldn't continue on with loading the URI.For example, if you had a link:

<a href="Ajax.php?id=5">Get Content</a>

And you didn't want the browser to load that file in the window, then you need to add an onclick event handler that simply returns false:

<a href="Ajax.php?id=5" onclick="return false;">Get Content</a>

Link to comment
Share on other sites

If you have a link that references some resource with a URI, and you don't want the browser to leave the page you are currently on to load that resource, then you need to tell the browser that it shouldn't continue on with loading the URI.For example, if you had a link:
<a href="Ajax.php?id=5">Get Content</a>

And you didn't want the browser to load that file in the window, then you need to add an onclick event handler that simply returns false:

<a href="Ajax.php?id=5" onclick="return false;">Get Content</a>

Yeah, but if I add that onclick event, then the link just wouldn't do anything....So when I click on it nothing happens.What I need is to reload the content of the innerHTML of the <div> when I click on each link......but....how can I do that if those links are on another file?
Link to comment
Share on other sites

The "return false" was just an example of how you can stop the browser from loading that href. You can put other things in the onclick:

<a href="Ajax.php?id=5" onclick="loadContent(this.href); return false;">Get Content</a>

function loadContent(url){	// create the XMLHttpRequest object and send off the	// request to the url that was passed into this function.}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...