AJAX Asyncronous Javascript and XML

Asynchronous JavaScript and XML is a new approach to using a number of existing technologies together, including HTML or XHTML, Cascading Style Sheets, JavaScript, the Document Object Model, XML, XSLT, and the XMLHttpRequest object. When these technologies are combined in the Ajax model, internet applications are able to make quick, incremental updates to the user interface without reloading the entire browser page.

Write an Article

RSS

jquery ajax menu collapse expand

Written by ksmithaiea on

From: sitepoint.com

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?

JavaScript Code:

$(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);            
  });

HTML4Strict Code:

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

Previous Article Next Article