Refresh jquery mobile listview after ajax call in full function not working

Question

I am developing an application using jQuery 1.3.1 and a phone table 2.9.0.

All ara data is downloaded dynamically from the server using php. My problem is that the update call does not work every time the list items are changed. I already tried a lot and searched a lot. I think the refresh function is called before the list ends, but it doesn't work anywhere I try to put this line of code.

Any help?

here is my list

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

this is how i make ajax call to 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 this is how i create a listview. This code is run every time the list items are modified to update the list with new items.

In the success function, I call setupdevice , which initializes the lists, as shown below. Then in the full function, I update the listview. For some reason, it only refreshes 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); 

This is the first time I have come to this problem, and I am really annoyed because I cannot find why this is happening.

Answer 1

The viewing list should be updated after the ul element is populated, so do the following:

 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 the listview will only be updated after adding content.

EDIT:

The problem mentioned in the comment can be solved as follows:

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

The first call to listview initializes the widget, and the second will update it.

Answer 2

You need to wait until the list is completely created. 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 can wait for an update by waiting for the done promise method.

Answer 3

I recently had almost the same problem, it was solved 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'); 

It was success: part of the call to $.ajax . 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> 

Hope this helps.