После загрузки данных Ajax'ом отображает только последнее значение

#javascript #jquery #ajax

Есть таблица, в ней много ячеек. Хочу Ajax'ом лениво выдергивать значения из базы
и по готовности вставлять.

При первом обходе и рисовании таблицы на PHP собираю массив ID для дальнейшей отправки
Ajax'ом.

Но отображаются данные только в последней ячейке:

$(document).ready(function() {
    //console.log(array);
    var path = ''; //путь к контролеру
    for (var i = 0; i < array.length; i++) {
        var elem = array[i];
        var url = path + "ajaxAll?val=" + encodeURIComponent(elem);
        console.log(elem, url);
        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            success: function(data) {
                //alert ($id);
                document.getElementById(elem).innerHTML = data; //запись в ячейку
            }
        })
        // document.getElementById(elem).innerHTML = elem; //так нормально пишет
в нужную ячейку
    }




пример array


  ["37_2015-06-1_1_2", "38_2015-06-1_1_2", "39_2015-06-1_1_2",
  "58_2015-06-1_1_2", "62_2015-06-1_1_2", "66_2015-06-1_1_2",
  "37_2015-06-2_1_2", "38_2015-06-2_1_2", "39_2015-06-2_1_2"]


то есть ид все есть. да и document.getElementById(elem).innerHTML = elem; нормально
данные вставляет

innerHTML += записал все ответы в одну последнюю ячейку. то есть ajax запрос идет,
а вот ид он берет последний

    

Ответы

Ответ 1

Хотите я Вам фокус покажу?

for (var i = 0; i < 10; i++) {
    var elem = i;
    window.setTimeout(function(){ console.log(elem) },1000);
}


Вы думаете данный код вернет последовательность от 0 до 9? А вот и не угадали, он
вернет Вам десять раз девятку. точно так же, как ваш код вставит все данные в только
в конечный elem, а не по последовательности. Это связанно с областями видимости, да
данный момент возникает замыкание на внешний контекст. 

Спасибо @Regent за подсказку, код можно изменить так, обернув функцию и разорвав
замыкание:

success: (function (elem){ return function(data) {
    document.getElementById(elem).innerHTML = data; 
}})(elem)


Ответ 2

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

UPD:

В примере elem объявлен в замыкании, после ответа сервера значение elem будет последним
(т. е. elem = array[array.length - 1] для каждого ответа). Чтоб избежать этого можно
использовать $.proxy

...
success: $.proxy(function(data){
    $(this).append(data);
}, elem)
...


В данном случае this будет указывать на elem