Генерация элементов динамического интерактивного списка

#jquery #ajax #json #jquery-mobile #html-lists

#jquery #ajax #json #jquery-мобильный #html-списки

Вопрос:

Я новичок в jquery mobile. Я пытаюсь сгенерировать элементы динамического интерактивного списка, где элементы списка — это имена, поступающие из ajax в качестве ответа.Я получаю электронное письмо Рави Тамады на второй странице для каждого элемента списка. Почему идентификатор электронной почты не меняется для каждого элемента списка? Есть ли какие-либо ошибки в моем коде?

Мой скрипт:

 //When DOM loaded we attach click event to button
    $(document).on("pageinit","#authors-list-page",function() {

            //start ajax request
                 $.ajax({
                        url: “myURL/contacts.json",

                        dataType: "json",
                        success: function(data) {

                        var listItem = "";
                        for(var i=0;i<data.contacts.length;i  ){ 
                              listItem  = '<li><a href="#">'   data.contacts[i].name   '</a></li>'; 
                         }

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" data.contacts[currentItem].name "</h1></div><div data-role=content>Email: "  data.contacts[currentItem].email "</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
                                 });

                           }
                   });

          });

Контакты.json :

     {
"contacts": [
    {
            "id": "c200",
            "name": "Ravi Tamada",
            "email": "ravi@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": " 91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    {
            "id": "c201",
            "name": "Johnny Depp",
            "email": "johnny_depp@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": " 91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    .
    .
    .
    .
]}

Ответ №1:

Вы повторяете весь ответ, а затем устанавливаете элемент списка.

Используйте это:

 for(var i=0;i<data.contacts.length;i  ){ 
    listItem  = '<li><a href="#">'   data.contacts[i].name   '</a></li>'; 
    $("#dynamicFieldList").append(listItem).promise().done(function () {                 
        //Your code of function.
    });
}

1. когда я добавляю код внутри цикла и нажимаю на элемент списка, элементы списка добавляются

2. Вам нужно будет держаться newPage.appendTo($.mobile.pageContainer); вне цикла. Добавьте все свои элементы в список div в цикле, а затем из цикла добавьте новый динамически сгенерированный div в pageContainer. @user3744502

3. Тот же результат (элементы списка добавляются при загрузке страницы). Можно ли опубликовать измененный код в jsfiddle?

4. @user3744502 опубликуйте скрипку для вашего текущего кода. Я постараюсь это обновить.

Ответ №2:

Используйте приведенный ниже код, добавлен код добавления в боковой цикл for.

                      for(var i=0;i<data.contacts.length;i  ){ 
                              listItem  = '<li><a href="#">'   data.contacts[i].name   '</a></li>'; 

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" data.contacts[currentItem].name "</h1></div><div data-role=content>Email: "  data.contacts[currentItem].email "</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
   }