JQUERY Toggle и Ajax - PullRequest
Новая
       10

JQUERY Toggle и Ajax

2 голосов
/ 23 июля 2011

У меня есть меню и подменю.Содержимое подменю загружается с помощью ajax.

Переключение подменю.Проблема в том, что когда я щелкаю, чтобы скрыть подменю, он все еще выполняет вызов ajax.

Как я могу сделать так, чтобы он выполнял только ajax-вызов, когда нажимаю, чтобы открыть меню? 

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

                });

            });

Ответы [ 4 ]

2 голосов
/ 23 июля 2011

В прошлом я делал это, добавляя / удаляя класс.

Добавлял тест, подобный 

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

Затем в обработчике успеха используйте .addClass ("подменю-загружен "), чтобы предотвратить повторный вызов Ajax.

0 голосов
/ 24 июля 2011

Попробуйте это простое решение вместе с некоторыми преимуществами производительности, которые не вызовут ajax-вызов после заполнения подменю, даже если вы откроете его в следующий раз. Я надеюсь, что это поможет вам. 

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

            });
0 голосов
/ 23 июля 2011 
if ($("#"+attrib).not(':visible')) {
    ...run ajax code
}

Это просто проверка, видно ли подменю, если нет, то вы можете выполнить код ajax.

Или, если вы хотите проверить наличие кода в подменю, вы можете сделать что-то вроде: 

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

Этот код проверяет наличие любого html в подменю, если ничего не найдено, код ajax может быть запущен.

0 голосов
/ 23 июля 2011

, поскольку .toggle() изменяет видимость объекта, вы можете проверить его свойство отображения CSS.Если он еще не спрятан, запуск Ajax-Call не требуется.

...