I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.
Have a look at the jQuery.getJSON() method on w3schools and jQuery API.
Example from jQuery API:
$.getJSON('ajax/test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); });
This example, of course, relies on the structure of the JSON file:
{ "one": "Singular sensation", "two": "Beady little eyes", "three": "Little birds pitch by my doorstep" }
Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body.
try this one:
$.ajax({
type: "POST",
url: "your_url",
contentType: "application/json; charset=utf-8",
dataType: "json",
success:successFunction,
error: function(msg) {
alert(msg.statusText);
}
});
function success:successFunction(data){
var html ='';
$.each(data.d, function(index, item) {
html += '<li><a href="#">' + item.Your_data+ '</a></li>';
});
$('#ul_id').append($(html));
$('#ul_id').trigger('create');
$('#ul_id').listview('refresh');
}
function makeList() {
$.post("http://example.com/getlist.php",
function(resultfromphp) {
$('#ulListview').append(resultfromphp);
$('#ulListview').trigger('create');
$('#ulListview').listview('refresh');
});
}
$("#pageName").live('pagebeforeshow', function(event) {
makeList();
});
This works perfectly for me. The php is returning <li></li>
tags
The html is a <ul id="ulListview"></ul>
tag
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With