Dynamically Appending Elements to jQuery Mobile ListView

Question

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 ?

Jasper · Accepted Answer · 2011-11-01 00:55:00Z

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

Developer · Accepted Answer · 2013-03-28 14:31:17Z

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

buley · Accepted Answer · 2011-10-31 23:57:55Z

0

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

answered Oct 31, 2011 at 23:57

buley

29.6k18 gold badges90 silver badges108 bronze badges

1 Comment

João Nunes Over a year ago

I believe that was an issue, but Unfortunately didn't solve everything. It must have another issue. Thank you anyway ;)

Bot · Accepted Answer · 2012-11-01 19:13:29Z

0

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

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

edited Nov 1, 2012 at 19:13

Bot

11.9k11 gold badges78 silver badges134 bronze badges

answered Jan 4, 2012 at 10:15

shyamshyre

5493 gold badges5 silver badges10 bronze badges

Comments

Josh LaMar · Accepted Answer · 2014-03-09 16:07:46Z

0

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/

answered Mar 9, 2014 at 16:07

Josh LaMar

2194 silver badges8 bronze badges

2 Comments

Lix Over a year ago

Hi Josh! Please take a moment to read over Stack Overflow policies regarding self promotion. In addition, there are many posts talking about the same issue on meta. Here is one of them - meta.stackexchange.com/questions/57497/…

Lix Over a year ago

From what I can see in your profile, you've been self-promoting quite a lot.

Collectives™ on Stack Overflow

Dynamically Appending Elements to jQuery Mobile ListView

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related