6

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 4

8

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.

7

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');

}
1
  • Can you give me complete demo ? Nov 16, 2012 at 6:10
2
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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.