jquery ajax menu collapse expand

[digitalbart]

Hi I am trying to build something like a tree menu but not exactly. You click a menu, which then does a ajax request for submenus and then displays them. You can then click on the submenus again and get another level of submenus. My problem is sometimes when click on the submenus it does close the menu or sometimes will keep adding to the existing submenu, menaing it will add an identical copy of the submenu, so you see two of the everything. I am using .live to and then is.hidden to see if the menu is visible. Any thoughts as to how I can get this work, toggle can be used with .live as far as I know because you have to click twice?

$(document).ready(function(){ 
 
 
  $('.cat',this).toggle(
    function () {
      var id = $(this).attr('href');
      if($('.box'+id).text() == '') {  
    var rand = '?random=' + Math.random();            
        $.getJSON('mclicks.php'+rand,{id:id},function(data){  
          $.each(data, function(i,item){                                
            $.each(item, function(intIndex, objValue) {
             // console.log(this);
                 $("div.box"+id).append("<a class='ahref' href='" + intIndex + "' id='"+id+"' onclick='return false;'>" + objValue + "</a> <div class='sub" + intIndex + " data'></div><br /> ");
             });
            $("div.box"+id).addClass("data").slideDown(200);         
          });  
        });  
        // $(this).html("Hide Clicks");
      } else { 
        // $(this).html('Hide Clicks');  
        $('.box'+id).slideDown(200);  
      }  
    },  
    function () {  
      var id = $(this).attr('href');
      //$(this).html('View Clicks');  
      $('.box'+id).slideUp(200);  
    }  
  );
 
 
 
   $('.ahref',this).live("click", function(){
   
 
   // e.preventDefault(e);
      
   var id = $(this).attr('id');
   
   var subid = $(this).attr('href');
   
 
 
if($('div.sub'+subid).is(':hidden')) {
 
    
    var text1 = $('div.sub'+subid).length;
     
          var rand = '?random=' + Math.random(); 
               
        $.getJSON('mclicks.php'+rand,{subid:subid,id:id},function(data){  
          $.each(data, function(i,item){                                
            $.each(item, function(intIndex, objValue) {
             // console.log(this);  + intIndex +   + intIndex +
                 $("div.sub"+subid).append("<a class='ahref' href='' onclick='return false;'>" + objValue + "</a> <div class='sub data'></div><br /> ");
             });            
          });
           
        });  
        
      $(".sub"+subid).addClass("data").slideDown(200); 
 
  
 } else {
      $('.sub'+subid).slideUp(200); 
      $("div.sub"+subid).remove();
          var text1 = $('div.sub'+subid).length;
        console.log(text1);
 }
 
      }, function () {  
        // $(this).html('Hide Clicks');  
        $('.sub'+subid).slideUp(100);
         $("div.sub"+subid).remove();
          var text1 = $('div.sub'+subid).length;
        console.log(text1);            
  });

<a onclick="return false;" id="3" href="27" class="ahref">Car Washes</a>
 
<div class="sub27 data" style="display: block;"><a onclick="return false;" href="" class="ahref">Chevrolet</a> <div class="sub data"/><br/> <a onclick="return false;" href="" class="ahref">Soft Wash</a> <div class="sub data"/><br/> <a onclick="return false;" href="" class="ahref">Detail Hand Car Wash</a> <div class="sub data"/><br/> </div>

[markbrown4]

I know it doesn't answer your question, but imo this is a really bad use of Ajax, of all elements on a website the main menu should be fast and accessible.

I would suggest loading all the menu content into the page and then just toggling the submenus.

[digitalbart]

Thank you for the response and sorry for the confusion. I will try to explain.

The menu is a directory built from a database and there is over 800 items in this menu. It is not the main menu per say but is the main part of the page. To load this all at once into the browser would not be good. I am using ajax to get only parts and then display them as the user browses a category, subcategory and then listing.

My question is toggle was not working when I would get json data back from the server. So I then added .live() to attached the new Ajax part of the menu to the Dom. However now I can't reliable toggle the sub menu element using and if else. The sub menu is not part of the initial page load is appended to the page based on what the user clicks on.

$('.ahref',this).live("click", function(){
   
 
   // e.preventDefault(e);
     
   var id = $(this).attr('id');
   
   var subid = $(this).attr('href');
   
 
 
if($('div.sub'+subid).is(':hidden')) {
 
   
  gets JSON DATA HERE THEN SHOWS IT
       
      $(".sub"+subid).addClass("data").slideDown(200);
 
 
 } else {
      $('.sub'+subid).slideUp(200);
      $("div.sub"+subid).remove();
 
 }
 
      }, function () { 
        // $(this).html('Hide Clicks'); 
        $('.sub'+subid).slideUp(100);
         $("div.sub"+subid).remove();
        
  });

[markbrown4]

Hi,

I'm not all too familiar with the syntax in your code but here's how I would go about it. The main thing you are missing is to assign the same events that you have setup on page load when you load the new content.
I would nest the elements so that the sub content is inside the parent

<ul id="tree">
  <li id="sub1" class="sub">linky linky</li>
  <li id="sub2" class="sub">linky linky</li>
</ul>

and break the code up into functions like:

var Tree = {
  init: function() {
    var tree=$('#tree');
    setupEvents(tree);
  },
  setupEvents: function(elm) {
    $(elm).find('.sub').click(function() {
      ..loadContent(this)
      ..toggle 
    });
  }
  loadContent: function(elm) {
    ..getJSON()
    ..append()
    [b]setupEvents(elm);[/b]
  },
};
$(document).ready(function() { Tree.init() });

Hope it helps