Jump to content


Photo

How To Reset An Ajax Generated Menu?


  • Please log in to reply
1 reply to this topic

#1 TOA

TOA

    Devil's Advocate

  • Members
  • PipPipPip
  • 619 posts
  • LocationMinnesota, U.S.A

Posted 29 November 2012 - 01:53 PM

I made an ajax menu, It's three levels deep and fills each level's content with content based on the previous choice. Pretty plain and simple, works fine.

I've found one issue, and that is: when I change the first level again (without a full page refresh) the third level menu stays on screen. To clarify..the second level menu option does correctly alter itself, but the third level stays there. This also happens if there's more than three levels of menus and will leave anything after.

Man I hope that makes sense! :happy-04:

I have limited experience with this so my question is: how do I add something to reset/clear anything after the one that's changed?

Here's my function that does the lifting. (I've also attached the entire current script with php and all)

<script type="text/javascript">
function changeContent(str, id, param)
{
if (str=="")
{
// if blank, we'll set our innerHTML to be blank.
document.getElementById(id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
	 // create a new XML http Request that will go to our generator webpage.
	 xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
	 // create an activeX object
	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// on state change
xmlhttp.onreadystatechange=function()
{
// if we get a good response from the webpage, display the output
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
	 document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
// use our XML HTTP Request object to send a get to our content php.
xmlhttp.open("GET","ajax-menu-4.php?"+param+"="+str, true);
xmlhttp.send();
}
</script>

Thanks for reading.

Attached Files


Ordo Ab Chao
Insanity: doing the same thing over and over again and expecting different results - Einstein

#2 TOA

TOA

    Devil's Advocate

  • Members
  • PipPipPip
  • 619 posts
  • LocationMinnesota, U.S.A

Posted 30 November 2012 - 01:46 PM

So I found that if I change it to the code below, it will overwrite the third menu to nothing, but there's an issue in that in doesn't 'collapse' the div. It leaves a blank space where the menu was previsouly, then if you refresh it collapses and is what I'm expecting.


if (xmlhttp.readyState==4 && xmlhttp.status==200){
if (id == 'categories')
{
	 document.getElementById('modules').innerHTML=""; // essentially just write it back to nothing
}
	document.getElementById(id).innerHTML=xmlhttp.responseText;
}

I suppose it's not a huge deal, but it bugs the ocd side of me. There has to be a better/more efficient way..
Ordo Ab Chao
Insanity: doing the same thing over and over again and expecting different results - Einstein




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com