JQUERY Toggle and Ajax

I have a menu and a submenu. Submenu content is loaded with ajax.

The开发者_运维百科 submenu toggles. The problem is that when I click to hide the submenu it still does the ajax call.

How can I only make it do an ajax call when I click to open the menu?

$("#showsubmenu").live("click", function() {
                var attrib = $(this).attr('menuid'); 

                $("#"+attrib).toggle();
                $("#"+attrib).html("<h4>&nbsp;&nbsp;Loading links...</h4>");
                $.ajax({  
                   cache: false,
                   url: "submenu.php", 
                   dataType: "html",
                   data: "&menuid="+attrib,
                   success: function (data) {   
                        $("#"+attrib).html(data);
                        },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    }

                });

            });

---

I've done it in the past by adding/removing a class.

Add a test like

if( !$(this).hasClass("submenu-loaded") ) {        
    ...Ajax call
}

Then in the success handler, use .addClass("submenu-loaded") to prevent the Ajax call being made again.

---

Try this simple solution along with some performance benefit which will not make ajax call once the submenu is populated even when you open it next time. I hope this will help you.

$("#showsubmenu").live("click", function() {
                var attrib = $(this).attr('menuid'); 
                var $attrib = $("#"+attrib);

                $attrib.toggle();

                if(!$attrib.data("subMenuPopulated") && $attrib.is(":visible")){

                    $attrib.html("<h4>&nbsp;&nbsp;Loading links...</h4>");
                    $.ajax({  
                     cache: false,
                     url: "submenu.php", 
                     dataType: "html",
                     data: "&menuid="+attrib,
                     success: function (data) {   
                        $attrib.html(data).data("subMenuPopulated", true);
                      },
                      error: function(jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                      }
                    });
                 }

            });

---

since a .toggle() changes the visibility of the object, you could check against it's CSS display property. If it's not hidden already, then there's no need to start the Ajax-Call.

---

if ($("#"+attrib).not(':visible')) {
    ...run ajax code
}

This is just checking to see if the sub-menu is visible, if it is not then you can execute the ajax code.

Or if you want to check for the existence of the code within the sub-menu you can do something like:

if ($("#"+attrib).html().length == 0) {
    ...run ajax code
}

This code checks for any html within the sub-menu, if none is found the ajax code can be run.