CODEWITHSUNDEEP
jqueryajaxjsonjquery-mobile
João Nunes
João Nunes

Reputation: 711

Dynamically Appending Elements to jQuery Mobile ListView

I want to dynamically append data received via an url in JSOn format to my listview. But i can't figure out how it works.

The mobile website retrieve the object in the following format:

[
    {"id":1, "start":"2011-10-29T13:15:00.000+10:00", "end":"2011-10-29T14:15:00.000+10:00", "title":"Meeting"}
]

In the .html i have one listview and a function, where i try to append the received data. I show only the body.

<body>
       <div>   
            <ul id="listview">
                <script>$.getJSON("url",
                function(data){
                    $.each(data, function(i,data){
                        i.title.appendTo("#listview");
                    });});</script> 
            </ul>
        </div>
</body>

Probably it's very easy, but i'm new to web programming and i can't figure out how that i should append the retrieved data.

Can anyone please help me out ?

Upvotes: 7

Views: 24658

Answers (5)

Josh LaMar
Josh LaMar

Reputation: 209

If you're trying to recreate a listview then you'll need to .trigger(create) and .listview(refresh) the list. The issue is explained at http://liljosh.com/jquery-mobile-dynamicly-appending-to-listview-via-ajax-issue/

Upvotes: 0

Developer
Developer

Reputation: 3998

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

Upvotes: 1

shyamshyre
shyamshyre

Reputation: 549

Please refresh the listview after appeding or removing. Unless you do refresh nothing can be seen.

$('#listview').append(output).listview('refresh');

Upvotes: 0

Jasper
Jasper

Reputation: 76003

//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/

Upvotes: 20

buley
buley

Reputation: 29318

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");
}

Upvotes: 0

Related Questions