I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.
4 Answers
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
I am working on a similar project using JQM which I would be passing through phone gap later on. The above answers although can be used to populate data dynamically using ajax, however don't address the implications of overriding the JQM ajax as the Jquery ajax is not really equipped at handling the JQM events which are built to extend DOM event for those who are interested or in a similar dilemma like me, I hope the below page helps you to take a informed decision with your project.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html