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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 17, 2013 at 12:47

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JcDenton86 Over a year ago

Thank you for the answer, but i have tried that already and it doesn't fix the problem. i keep getting the error "Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' at file:///android_asset/www/js/jquery-1.9.1.min.js:3"

Gajotres Over a year ago

That problem can be easily solved, I will add it to my answer.

JcDenton86 Over a year ago

I've tried that too. I have done a lot of searching and tried many things. If i do that then i get a strang error "Uncaught TypeError: Cannot read property 'jQuery191035519159212708473' of undefined at file:///android_asset/www/js/jquery-1.9.1.min.js:5".

Gajotres Over a year ago

Then only thing I can ask you is to add more of your code, I want to see at what point inside a ajax call you are appending result to a listview. Or instead of listview('refresh') you can use $('#contentID')trigger('create'); where #content ID is an ID of your data-role="content" DIV.

JcDenton86 Over a year ago

i updated my question. If you could provide an example close to my question i would appreciate it. Thank you again!

|

krishwader · Accepted Answer · 2013-07-17 13:37:36Z

1

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.

answered Jul 17, 2013 at 13:37

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Comments

Michal Zyka · Accepted Answer · 2013-07-18 07:36:51Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

EDIT :

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT :

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related