Получение моего ajax в порядке

Question

Я никогда не был знаком с JavaScript или jquery, но мой последний проект потребовал, чтобы я стал лучше. Я пытаюсь создать виджет для веб-сайта. Этот виджет использует ajax для доступа к данным json из другого домена. Этот виджет может иметь несколько экземпляров на одной странице, каждый с разными настройками.

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

Проблема, с которой я сталкиваюсь, заключается в следующем;

Поскольку аякс-запрос является асинхронным, результаты идут в случайном порядке. Код Ihave до сих пор

<script> 
    var currentContainer; 
    $(document).ready(function(){ 
     $($(".container")).each(function(index){ 
       currentContainer = this; 
       var url = 
        "http://example.com/json.php?iid="+$(this).data("owner_id")+ 
        "&iid="+$(this).data("item_id")+ 
        "&l="+$(this).data("layout")+ 
        "&callback=?"; 

       var request = $.get(url,function(data){ 
        console.log(data) 
        display(data.oid,data.iid,data.l); 
       },"jsonp"); 
     });   
    }); 

    function display(oid,iid,l){ 
     $(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l); 
    } 

И в теле ....

<div class="container" data-owner_id="George" data-item_id="car" data-layout="tidy">-</div> 
<div class="container" data-owner_id="tim" data-item_id="computer" data-layout="allovertheplace">-</div> 
<div class="container" data-owner_id="dee" data-item_id="hammer" data-layout="effingmess">-</div> 

В результате я получаю случайные данные только последний. Любые идеи очень ценятся!

Answer 1

Не используйте глобальную переменную в этом случае. Передайте currentContainer функции отображения в качестве аргумента.

var currentContainer = this; 

... 

var request = $.get(url,function(data){ 
        console.log(data) 
        display(currentContainer, data.oid,data.iid,data.l); 
       },"jsonp"); 

... 

function display(currentcontainer, oid, iid, l) { 
... 

Answer 2

Проблема заключается в строке:

$(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l); 

Когда вы Переберите дивы с классом container ($($(".container")).each), вы присваиваете currentContainer к DIV вы работаете. Поэтому в конце currentContainer относится к последнему элементу с классом container.

В display вы хотите выбрать div для использования его атрибута data. Вы можете сделать этот тип выбора с помощью селекторов атрибутов jQuery. $("[attribute='val']")