Jquery get() требует 2 прохода?

Question

С помощью jquery & ajax в приложении Symfony нажатие кнопки предназначено для получения нескольких свойств объекта. Первый щелчок кнопки возвращает неопределенное значение; дальнейшие щелчки извлекают ожидаемые значения. Как получить это в первый раз?

Фрагмент скрипта:

    $("#contact_household_button").click(function() {
        var houseId = $("#contact_household").val();
        if (houseId !== "") {
            var url = "/app_dev.php/household/contact/" + houseId;
            $.get(url, function(data) {
                $("#household_store").data(data);
            })
            var household = $("#household_store");
            var head = household.data('head');
            alert(houseId + ": " + head);
        }
    });

Пример ответа от get ():

{"id": 8607, "head": "Some Person"}

Первый клик дает

8607: не определено

2 - n кликов дают

8607: какой-то человек

Answer 1

$.get асинхронный

Это означает, что его функция обратного вызова будет выполняться когда-нибудь в будущем, когда запрос успешно получит ответ. Код ниже $.get вызов выполняется синхронно, он не ожидает завершения асинхронных операций.

Код, который зависит от данных, асинхронно полученных через $.get должен быть выполнен / вызван изнутри $.get Перезвоните:

        $.get(url, function(data) {
            $("#household_store").data(data);
            //got response, now you can work with it
            var household = $("#household_store");
            var head = household.data('head');
            alert(houseId + ": " + head);
        });

Если вы предпочитаете, также можно прикрепить обратные вызовы с помощью $.Deferred-совместимые методы jqXHR:

        $.get(url).done(function(data) {
            $("#household_store").data(data);
            //got response, now you can work with it
            var household = $("#household_store");
            var head = household.data('head');
            alert(houseId + ": " + head);
        });

---

Я думаю, вы, возможно, уже поняли, почему вам понадобятся "2 клика", чтобы он работал до сих пор, но в любом случае, вот поток выполнения вашего опубликованного кода (параграфы, обозначающие синхронные блоки, отступ для начала / конца Ajax-запроса):

>>> Кнопка кликов
>>> отправляет запрос Ajax
>>> Оповещения не определены, так как ответ еще не получен

>>> Через несколько миллисекунд в будущем получает ответ от Ajax-вызова, устанавливает данные элемента

>>> Снова нажимает кнопку
>>> отправляет запрос Ajax снова
>>> Использует набор данных из предыдущего запроса

>>> Через некоторое время получает данные из запроса, задает данные элемента