Hello
I have a ajax menu that fetches data and returns it in json and then rebinds it to the page with live. This is very similar to a tree menu but it is text instead and horizontal This works great for the most part but sometimes it misfires when using .is(‘:hidden’) and it ends up getting the data again and no matter what it will just keep adding the same data over instead of toggleing and closing the menu. Any ideas?
Below is the code I am using.
$(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(100);
});
});
// $(this).html("Hide Clicks");
} else {
// $(this).html('Hide Clicks');
$('.box'+id).slideDown(100);
}
},
function () {
var id = $(this).attr('href');
//$(this).html('View Clicks');
$('.box'+id).slideUp(100);
}
);
/******************************* display menu for subcats ***********************************/
$('.ahref',this).live("click", function(e){
// e.preventDefault(e);
var id = $(this).attr('id');
var subid = $(this).attr('href');
// console.log(id);
if($('.sub'+subid).is(':hidden')) {
if($('.sub'+id).text() == '') {
//$("div.sub"+id).append("sub menus goes here");
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(100);
} // end of blank text check...
} else {
$('.sub'+subid).slideUp(100);
$("div.sub"+subid).html("");
}
}, function () {
// $(this).html('Hide Clicks');
$('.sub'+subid).slideUp(100);
});
/******************************* end of menu for subcats ***********************************/
});
Below is the code to generate the first round of links:
The output is this:
<a href="16" class="cat">Cat 1</a><br><div class="box16"></div>
<a href="3" class="cat">Cat 2</a><br><div class="box3"></div>