Как динамически заполнять jQuery мобильные страницы с использованием данных JSON?

Я пытаюсь получить данные от какого-то внешнего JSON (http://ip-api.com/json). Затем я хочу использовать клавиши для динамического заполнения списка. Я хочу, чтобы каждый элемент списка был ссылкой, и когда вы нажимаете на ссылку, страница jQuery Mobile будет содержать соответствующее значение ключа. У меня две мобильные страницы jQuery, один дом и еще один.Как динамически заполнять jQuery мобильные страницы с использованием данных JSON?

Я пытаюсь достичь этого, изменив идентификатор второго «data-role = page» div на текущие данные ключа, а также добавив данные ключа в h2 и добавив данные значения в p. Он создает правильный список ключей, но когда я нажимаю на первый элемент, h2 содержит ВСЕ ключи, а p содержит ВСЕ значения. Как я могу изменить это, чтобы каждая пара ключей/значений заканчивалась как h2 и p какой бы страницы jQuery Mobile в настоящее время не была создана, щелкнув соответствующий элемент списка клавиш?

Я пытался использовать код от How to populate a jQuery Mobile ListView with JSON data?, но я не могу заставить его работать, поскольку он не использует внешний JSON.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Geo-Location Data</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="assets/css/themes/geoLocation.css" /> 
     <link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
     <script src="assets/js/geoLocation.js"></script> 
    </head> 
    <body> 
     <div data-role="page" id="homePage"> 
      <div data-role="header"> 
       <h1>Geo-Location Data</h1> 
      </div> 
      <div data-role="main" class="ui-content"> 
       <div data-role="collapsible" data-collapsed="true"> 
        <h2>Click here for Geo-Location Data</h2> 
        <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true"> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div data-role="page" id="dataPage"> 
      <div data-role="header"> 
       <h2 id="dataHeading"></h2> 
      </div> 
      <div data-role="content"> 
       <p></p> 
      </div> 
     </div> 
    </body> 
</html> 

$(document).ready(function() { 
    $.getJSON("http://ip-api.com/json", function(data){ 
     $.each(data, function(key, val){ 
      $("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>'); 
      $("ul#list").listview("refresh"); 
      $("div#dataPage").attr("id", key); 
      $("h2#dataHeading").append(key); 
      $("p").append(val); 
     }); 
    }); 
})

источник

2016-06-01 Tanya Branagan

Решение. То, что работало, полностью отказалось от второй страницы JQM и создало ее, добавив данные в тело в JavaScript. Вот обновленный код.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Geo-Location Data</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="assets/css/themes/geoLocation.css" /> 
     <link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
     <script src="assets/js/geoLocation.js"></script> 
    </head> 
    <body> 
     <div data-role="page" id="homePage"> 
      <div data-role="header"> 
       <h1>Geo-Location Data</h1> 
      </div> 
      <div data-role="main" class="ui-content"> 
       <div data-role="collapsible" data-collapsed="true"> 
        <h2>Click here for Geo-Location Data</h2> 
        <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="arrow-r" data-autodividers="true"> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

$(document).ready(function() { 
    $.getJSON("http://ip-api.com/json", function(data){ 
     $.each(data, function(key, val){ 
      $("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>'); 
      $("body").append('<div data-role="page" id="'+ key +'"><div data-role="header" id=""><h2 id="dataHeading"></h2 ></div><div data-role="content"><p>'+ val +'</p></div></div>'); 
      $("ul#list").listview("refresh"); 
     }); 
    }); 
});

источник

2016-06-02 17:02:30

Вы используете $.each цикл так, он держит добавление $("h2#dataHeading").append(key); & $("p").append(val); на 2-й странице, как она перебирает данные JSon так его на самом деле не создавать отдельные страницы. Все, что он делает, это изменить id страницы dataPage один раз, и после этого он не сможет найти $("div#dataPage"), поэтому я удивляюсь, что все ссылки в пунктах работают, за исключением первого.

Более эффективным способом является использование атрибута data-* для хранения key и val непосредственно на элементы списка, возьмите их на клик, добавить к 2-й странице и открыть 2-ю страницу динамически. Это устраняет необходимость в отдельных страниц, сохраняя DOM небольшой

Е.Г.

$(document).ready(function() { 
    $.getJSON("http://ip-api.com/json", function(data){ 
     $.each(data, function(key, val){ 
      $("ul#list").append('<li data-key="'+key+'" data-val="'+val+'"><a>'+ key + '</a></li>'); 
      $("ul#list").listview("refresh"); 
     }); 
    }); 

//The list item click function 
$("#list> li").on("click", function() { 
var key= $(this).attr("data-key"); 
var val= $(this).attr("data-val"); 
$("#dataHeading").empty().append(key); 
$("p").empty().append(val); 
$(":mobile-pagecontainer").pagecontainer("change", "#dataPage", { transition: "slide" }); 
}); 

});

Я предлагаю заменить $(document).ready что-то вроде pagecreate как лучше всего работает JQM со встроенным page Events

При использовании $(":mobile-pagecontainer") вы могли также отправьте данные на страницу, но вам понадобится другая функция, например pagebeforeshow, чтобы добавить данные на страницу до ее отображения. Если вы решите сделать это таким образом, rea d Примечания для версий. JQM осуждает некоторые события в версиях в пользу новых событий замены

источник

2016-06-02 10:58:49 Tasos

Как динамически заполнять jQuery мобильные страницы с использованием данных JSON?

ответ

Смежные вопросы