Question

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

                });

            });

Answer 1

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

            });