Dynamically Appending Elements to jQuery Mobile ListView

//make AJAX call to url$.getJSON("url", function(data){    //declare a variable with which to build our output (it's best to buffer output and only do one append at the end since DOM manipulation is CPU expensive)    var output = '';    //iterate through the data (we could also get rid of the jQuery here by using `for (key in data) {    $.each(data, function(index, value){        //add each value to the output buffer (we also have access to the other properties of this object: id, start, and end)        output += '<li>' + value.title + '</li>';    });    //now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list)    $('#listview').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');`});

Here is a jsfiddle of the above solution (there is also an example of using for(){} instead of $.each()): http://jsfiddle.net/VqULm/

I'm appending like this..Its working for appending..It may be helpful for you or others :)

          $.each(data.values, function(key, value) {          $('#activity_contacts').append('<li id="activity_contacts" data-id="' + value.contact_id + '">' + value.display_name + '</li>');          $("#activity_contacts").listview("refresh");          });

My entire autocomplete is like this:

    function contactSearchForActivities (q) {    $.mobile.showPageLoadingMsg( 'Searching' );    $().crmAPI ('Contact','get',      {'version' :'3', 'activity_sort_name': q, 'return' : 'display_name' },      {        ajaxURL: crmajaxURL,        success:function (data){          if (data.count == 0) {            cmd = null;          }          else {            cmd = "refresh";            $('#activity_contacts').show();            $('#activity_contacts').empty();          }          //console.log(data);          //loop to go through the values in order to display them in a li as a list          $.each(data.values, function(key, value) {          $('#activity_contacts').append('<li id="' + value.contact_id + '" title = "' + value.display_name +'">' + value.display_name + '</li>');   });    $("#activity_contacts li").click(function() {   $('#activity_sort_name').val(this.title);   $('#activity_hidden_id').val(this.id);           $("#activity_contacts").empty();   });          $.mobile.hidePageLoadingMsg( );          $('#activity_contacts').listview(cmd);        }      });  } 

I think the issue you might be encountering is that the JSON being returned is an object wrapped in an array. To parse you will have to iterate through the array first:

for( var x = 0; x < data.length; x++ ) { var i = data[ x ]; i.title.appendTo("#listview");}