Jump to content

How To Reset An Ajax Generated Menu?


TOA

Recommended Posts

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.

ajax-menu-4.php

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.