JQuery сортирует, только если существует точка останова в Firebug - PullRequest
Новая
       1

JQuery сортирует, только если существует точка останова в Firebug

1 голос
/ 22 мая 2011

Я создал скрипт, который отправляет AJAX-запрос и обновляет select element со списком option элементов. После того, как это было сделано, я пытаюсь отсортировать опции элементов, используя плагин JQuery jQuery.sortElements.js : 

/* If region is specified */
    if (regionId != '0') {
        /* AJAX request to get city list and refresh select state. */
        $.getJSON('/json/cities', {region_id: regionId}, function(json) {
            $("select.changedBy-" + regionSelectId).each(function() {
                var citySelect = $(this);
                $.each(json, function(id, name) {
                    $('<option value="' + id + '">' + name + '</option>').appendTo(citySelect);
                });
            });
        });

        /* Sorting */
        $("select.changedBy-" + regionSelectId).each(function() {
            $(this).find('option').sortElements(function(option1, option2) {
                var option1Value = $(option1).attr('value');
                var option2Value = $(option2).attr('value');
                if (option1Value == '0') return -1;
                if (option2Value == '0') return 1;
                if (option1Value == regionId) return -1;
                if (option2Value == regionId) return 1;
                return $(option1).text() > $(option2).text() ? 1 : -1;
            });
        });
    }
};

К сожалению, сортировка работает, только если я поставил точку останова в Firebug в следующей строке: 

$("select.changedBy-" + regionSelectId).each(function() {

В другом случае (обычный режим) он не сортирует option elements. Не могли бы вы помочь мне найти причину этой проблемы?

Спасибо, Борис.

Ответы [ 3 ]

2 голосов
/ 22 мая 2011

Звучит и выглядит как проблема синхронизации.Вы понимаете, что вызов getJSON() является асинхронным, верно?Движок JavaScript доберется до $.getJSON(), сделает запрос и затем почти сразу же получит ваш код сортировки.Сортировать не удастся, поскольку не будет никаких элементов для сортировки, поскольку запрос еще не завершен.

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

Я бы предложил один из следующих вариантов:

  1. Перемещение всего кода сортировки внутри getJSON() функция обратного вызова, сразу после добавления всех новых <option> s
  2. Оборачивание кода сортировки в функцию и вызов этой функции после завершения создания всех новых <option> s

Вот код для первого предложения (гораздо проще - это включало просто вырезание и вставку кода сортировки в тело функции обратного вызова): 

 if (regionId != '0') {
        /* AJAX request to get city list and refresh select state. */
        $.getJSON('/json/cities', {region_id: regionId}, function(json) {
            $("select.changedBy-" + regionSelectId).each(function() {
                var citySelect = $(this);
                $.each(json, function(id, name) {
                    $('<option value="' + id + '">' + name + '</option>').appendTo(citySelect);
                });
            });

            /* Sorting */            
             $("select.changedBy-" + regionSelectId).each(function() {
                $(this).find('option').sortElements(function(option1, option2) {
                    var option1Value = $(option1).attr('value');
                    var option2Value = $(option2).attr('value');
                    if (option1Value == '0') return -1;
                    if (option2Value == '0') return 1;
                    if (option1Value == regionId) return -1;
                    if (option2Value == regionId) return 1;
                    return $(option1).text() > $(option2).text() ? 1 : -1;
                });
            });
        });
    }
0 голосов
/ 22 мая 2011

Ajax-запрос может быть асинхронным.Использовать синхронный Ajax-запрос

0 голосов
/ 22 мая 2011

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

 makeAjaxCall(callBack(){
  createOptionElements();
  SortOptionElements();
});

Надеюсь, это сработает для вас. удачи :) 1004 *

...