javascript - How do I dynamically populate jQuery Mobile pages using JSON data? -
i'm trying data external json (http://ip-api.com/json). want use keys dynamically populate listview. want each list item link, , when click link, jquery mobile page contain key's matching value. have 2 jquery mobile pages, 1 home, , 1 other.
i'm trying achieve changing id of the second "data-role=page" div current key data, , appending key data h2, , appending value data p. it's creating correct list of keys, when click on first item, h2 contains of keys, , p contains of values. how can amend each key/value pair ends h2 , p of whichever jquery mobile page being created clicking corresponding key list item?
i've been trying use code how populate jquery mobile listview json data? can't quite working isn't using external 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 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); }); }); })
you using $.each loop keeps appending $("h2#dataheading").append(key); & $("p").append(val); 2nd page loops through json data not creating separate pages. change id of datapage page once , wont able find $("div#datapage") thereafter i'm surprised links in items work except first one.
a more efficient way use data-* attribute store key , val directly on list items, grab them upon click, append 2nd page , open 2nd page dynamically. alleviates need separate pages while keeping dom small
e.g
$(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" }); }); }); i suggest replacing $(document).ready pagecreate jqm works best inbuilt page events
when using $(":mobile-pagecontainer") send data page need function pagebeforeshow append data page before displays -- if decide way, read notes versions supported. jqm deprecates events in versions in favor of new replacement events
