Refresh jquery mobile listview after ajax call in complete function doesn't work

Question

I am developing an application using jQuery 1.3.1 and phonegap 2.9.0.

All the data ara loaded dynamically from the server using php. My problem is that the refresh call doesn't work every time the listview items changing. I've tried and searched a lot with no success yet. What i think, is that the refresh function is called before the listview is completed, but anywhere i try to put this line of code it doesn't work.

Any help?

here is my listview

<ul data-role="listview" data-autodividers="true" id="listview1" data-divider-theme="b" data-split-theme="b" data-filter-theme="b" data-split-icon="phone" data-filter="true" data-filter-placeholder="Search..." ></ul>

here is how i make tha ajax call to the server

$.ajax({url: JsonURL
           beforeSend: function(){ $.mobile.showPageLoadingMsg('b', 'Updating content...', true); },
           complete: function () { 
                                  console.log("refreshing..");
                                  $('#listview1').listview('refresh');
                                  $('#listview2').listview('refresh');
                                  $('#listview3').listview('refresh');
                                  $.mobile.hidePageLoadingMsg(); },
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           async: true,
           success: function (result) {
                     data = result;
                     app.setupdevice();
                     $.mobile.changePage('#home', {transition: 'slide'});
                   },
                   error: function (request, error) {
                            console.log(error.message);
                        }
            });

and here how i create the listview. This code runs every time the items of the list change to update the list with the new items.

In the success function i call setupdevice whtich initializes the listviews as shown below. Then in the complete function i am refreshing the listview. For some reason the it's refreshing only the first time.

items='';    
$.each(data.pois, function() {
             items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
            });

            $('#listview1').html(items);

It's the first time i reach this issue and i am really annoyed because i can't find why this is happening.

Answer 1

Listview refresh should be executed after ul element has been populated, so do it like this:

items='';    
$.each(data.pois, function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview('refresh');

This way you can be sure that listview is going to be refreshed only after content has been appended.

EDIT :

Problem mentioned in the comment can be solved like this:

items='';    
$.each(data.pois, function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview().listview('refresh');

First listview call will initialize widget and a second will will refresh it.

Answer 2

You have to wait for list view to be created completely. Taken from@gajotres' example :

items='';    
$.each(data.pois, function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items).promise().done(function () {
  $(this).attr("data-role", "list view").listview().listview('refresh');
});

You could make the refresh wait by waiting for the done method of promise.

Answer 3

I recently had nearly the same kind of problem, solved it like this:

$.each(data.itemList, function(index, item) {
    console.log('index: ' + index);
    html += '<li><a href="#" class="detailslink" id="item_' 
         + index + '">' + item.SI_REGNBR + '<h2>Name: ' 
         + item.SI_NAME_EN + '</h2><p>Type: <strong>' 
         + item.SI_TYPE + '</strong></p></a></li>';
});

$('#dataView').empty();
$('#dataView').append($(html));
$('#dataView').trigger('create');
$('#dataView').listview('refresh');
$('#dataView ul').listview('refresh');

This was the success: part of the $.ajax call. The HTML looked like this:

<ul data-role="listview" id="dataView" data-inset="true" data-filter-reveal="false" data-filter-placeholder="Search items..." data-filter="true"></ul>

I hope it helps.