jQuery - показать список после загрузки - PullRequest
Новая
       32

jQuery - показать список после загрузки

1 голос
/ 25 октября 2011

Я создал скрипт для получения дочерних жанров из «родительского» жанра из базы данных MySQL, используя getJSON(). Чтобы показать список дочерних жанров, я использовал функцию show(), но поскольку список еще не загружен, он просто всплывает, и мне это не нравится. Как использовать функцию load() (или любую другую, которая поможет в моем случае), чтобы дождаться загрузки списка, а затем использовать show()? 

function getZvrsti(id){
        $.getJSON('test.php?parent='+id, function(data) {
            var tmpLi;
            $.each(data, function(id, name) {
                tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
                $(".drugeZvrsti").append(tmpLi);
                tmpLi = "";
            });
        });
    }

Это функция, которая использует getJSON, а вот фрагмент, где я использую show(): 

$(".naprejZvrst").click(function(){
            if(!on2){
                parent = $(this).attr("id");
                getZvrsti(parent);
                $(".drugeZvrsti").load(function(){ //my poor example of load()
                    druga.show(400);
                });
                on2 = true;

            }
            else if(on2){
                druga.hide(400);
                on2 = false;
                $(".drugeZvrsti").html(''); 
            }

        })

Класс drugeZvrsti - это список <ul>, где отображается список, var druga - это <div>, где весь список <ul>. ПРИМЕЧАНИЕ: я нашел пример функции load(), но никто не объяснил, как использовать со списком, большинство было для изображений.

Ответы [ 3 ]

2 голосов
/ 25 октября 2011

$.getJSON, что является сокращением для $.ajax, по умолчанию является асинхронным, что означает, что выполнение кода продолжится после его вызова.

Что вы хотите сделать, это показать список в обратном вызове после того, как вы создали и добавили элементы списка. 

// Let's define our local scope variables
var druga = $(".drugeZvrsti"),
    request = false;

function getZvrsti(id) {
    // Save the request to our requests object
    requests[id] = $.getJSON('test.php?parent='+id, function(data) {
        var html = "";
        $.each(data, function(id, name) {
            html += '<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>';
        });
        // Append the list items and then fade in
        druga.append(html).show(400);
        // We no longer have a request going
        request = false;
    });
}

$(".naprejZvrst").click(function(){
    var id = $(this).attr("id");
    // Since we don't want multiple requests, abort any existing one
    if (request) {
        request.abort();
        request = false;
    }
    if (druga.is(":hidden")) {
        getZvrsti(id);
    } else {
        // Stop any animations, fade out and
        // use callback to empty the list when its hidden
        druga.stop().hide(400, function(){
            druga.empty();
        });
    }
});

Вы также можете отметить некоторые другие изменения, которые я сделал здесь, такие как:

  • Кэширование селектора для списка, поскольку он используется несколько раз
  • Создание списка в виде простой строки и добавление его один раз.Это связано с медленной манипуляцией с DOM, поэтому рекомендуется снижать ее до минимума.
  • Сохранение запроса в переменной, поэтому при наличии любого текущего запроса его можно прервать, когда список скрыт
  • Проверка видимости druga с помощью .is вместо использования переменной on2
1 голос
/ 25 октября 2011

Если вы добавите функцию обратного вызова, которая будет выполняться при успешном выполнении getJSON, вы увидите, когда она завершилась.Хотя я только что druga показал, что вам придется изменить это, чтобы установить переменную, которую вы затем отметите в своем событии click.Это все в документах . 

function successFunction(data) {
  druga.show(400);
}

function getZvrsti(id){
        $.getJSON('test.php?parent='+id, function(data) {
            var tmpLi;
            $.each(data, function(id, name) {
                tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
                $(".drugeZvrsti").append(tmpLi);
                tmpLi = "";
            });
        }, successFunction(i));
    }
0 голосов
/ 25 октября 2011

Вы можете использовать обратный вызов, как это: 

function getZvrsti(id, callback){
    $.getJSON('test.php?parent='+id, callback(data));
}

... 

 getZvrsti(parent, function(data) {
        var tmpLi;

        $.each(data, function(id, name) {
            tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
            $(".drugeZvrsti").append(tmpLi);
            tmpLi = "";
        });

       druga.show(400);
 });

непроверенный код

...