Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jQuery ajax сложная конструкция

Автор: Veroonya 25.12.2012, 16:57

При покидании окна ввода текста id=autoSign вызывается функция, которая подтягивает данные ajax-ом, связанные с введенным текстом, на базе этих данных выполняется функция, в которой снова вызывается ajax, для получения еще одного набора данных.

Код


$("#autoSign").blur(function() {
    $.ajax({
        url: "${createLink(controller: 'car', action: 'resolveModel')}",
        type: 'Get',
        data: {autoSign: $("#autoSign").val()},
        success: function(data) {
          for (var i = 1; i <= data.сount1; i++) {
                for (var j=1; j<= data.count2; j++){
                var a = rndrTireModel(data.id, 'steer', i, j, 'left');
                ("#result1").val(a);
                a = rndrTireModel(data.id, 'steer', i, j, 'right'); 
                 ("#result2").val(a);
                a = rndrTireModel(data.id, 'lead', i, j, 'left');
                ("#result3").val(a);
                a = rndrTireModel(data.id, 'lead', i, j, 'right');
                 ("#result4").val(a);
             }
          }
       }
    });

function rndrTireModel(carId, shaft, shaftNum, wheel, side) {
     var result;
     $.ajax({
        url: "${createLink(controller: 'tireModel', action: 'resolveTireModel')}",
        type: 'Get',
        data: {car: carId, shaft: shaft, shaftNum: shaftNum, wheel: wheel, side: side},
        success: function(text) {
          result = text;
        }
     });
     alert (result); 
     return result;
}
 });

При добавлении alert (result); данные появляются в итоге там где нужно, при отсутвии alert данные не появляются.
Подумываю, что это как то связано с тем, что когда выполняется второй ajax первый уже завершил свое выполнение.

Подскажите, как реализовать?

Автор: Aliance 25.12.2012, 18:16

Нужно прочитать про замыкания и (а)синхронность запросов в JS. Обычно я кидаю http://shamansir.github.com/JavaScript-Garden/#function.closures (особенно раздел "Замыкания внутри циклов"), т.к. там как мне кажется наиболее просто объяснено то, что нужно знать.

Решение:
В rndrTireModel нужно передавать ID элемента, куда нужно вставлять результат, и далее вставлять его после выполнения второго запроса. Примерно это будет выглядеть так:

Код


...
rndrTireModel(data.id, 'steer', i, j, 'left', 'result1');
...
function rndrTireModel(carId, shaft, shaftNum, wheel, side, elemID) {
     $.ajax({
        url: "${createLink(controller: 'tireModel', action: 'resolveTireModel')}",
        type: 'Get',
        data: {car: carId, shaft: shaft, shaftNum: shaftNum, wheel: wheel, side: side},
        success: function(text) {
          ("#"+elemID).val(text);
        }
     });
}
 });

Автор: Veroonya 25.12.2012, 18:54

Цитата(Aliance @ 25.12.2012, 18:16

)

В rndrTireModel нужно передавать ID элемента, куда нужно вставлять результат

спс, сама не додумалась

Автор: Veroonya 25.12.2012, 19:12

Цитата(Aliance @ 25.12.2012, 18:16

)

В rndrTireModel нужно передавать ID элемента, куда нужно вставлять результат

Когда так делаешь, дает везде одинаковый результат

Автор: Aliance 25.12.2012, 19:35

1. В консоле нужно проверить, действительно ли данные должны быть разными.
2. Если п. 1 не помог, то нужно показать весь новый код.

Автор: Veroonya 25.12.2012, 20:38

В результате действительно должны быть разные значения.
В итоге получается везде результат от последнего вызова функции (которой должен быть в result4);

Код


$("#autoSign").blur(function() {
    $.ajax({
        url: "${createLink(controller: 'car', action: 'resolveModel')}",
        type: 'Get',
        data: {autoSign: $("#autoSign").val()},
        success: function(data) {
          for (var i = 1; i <= data.сount1; i++) {
                for (var j=1; j<= data.count2; j++){
                rndrTireModel('steer', i, j, 'left', '#result1');
                rndrTireModel('steer', i, j, 'right', '#result2'); 
                rndrTireModel('lead', i, j, 'left', '#result3');
                rndrTireModel('lead', i, j, 'right', '#result4');
             }
          }
       }
    });

function rndrTireModel(shaft, shaftNum, wheel, side, elID) {
     $.ajax({
        url: "${createLink(controller: 'tireModel', action: 'resolveTireModel')}",
        type: 'Get',
        data: {car: $("#car").val(), shaft: shaft, shaftNum: shaftNum, wheel: wheel, side: side},
        success: function(text) {
          $(elID).val(text);
        }
     });
 }

Автор: Aliance 26.12.2012, 10:34

Veroonya, выше я приводил линк с указанием раздела, на который нужно обратить внимание. Вы его читали?
Думаю, что для решения проблемы достаточно просто будет создать замыкание.

Автор: Veroonya 27.12.2012, 16:32

всем спс нашла затуп в коде.
Было обращение к элементу с "."
$("#name.name");
А так делать нельзя