How to populate jQuery mobile device list view with JSON data from server?

Question

I am using jQuery Mobile with PhoneGap. How can I get the JSON data (from the server) and populate it as a list.

Answer 1

Take a look at the jQuery.getJSON () method on the 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, depends 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 goes through the requested data, builds an unordered list and adds it to the body.

Answer 2

try the following:

 $.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'); } 

Answer 3

 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 great for me. Php returns <li></li> tags <ul id="ulListview"></ul> HTML tag <ul id="ulListview"></ul>

Answer 4

I am working on a similar project using JQM, which I will transfer over the phone later. The above answers, although they can be used to dynamically populate data with ajax, do not consider the consequences of overriding JQM ajax, because JQuery ajax is not really equipped with JQM event processing that is designed to extend DOM events for those interested or in a similar dilemma as I hope the page below helps you make an informed decision with your project.

http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html