CODEWITHSUNDEEP
jqueryjquery-mobile
ldmo
ldmo

Reputation: 379

How do I dynamically add items to a listview in jQuery Mobile / Listview not updating

Take a look at my code: http://jsfiddle.net/WqssQ/

When you click check in, it pops up with a listview in a dialog page. If you dismiss this, then click check in again, the listview isn't formatted properly.

I have tried:

$('#location_listview').listview('refresh');

As suggested, but this doesn't work.

Upvotes: 0

Views: 119

Answers (3)

Moshood Aminu
Moshood Aminu

Reputation: 291

 $.mobile.changePage("#location_popup", {
    transition: "fade",
    role: "dialog",
    reverse: false
});

$('#location_listview').listview('refresh'); // The positioning of location_listview resolved the issue

Check my solution on jsfiddle. http://jsfiddle.net/WqssQ/20/

$('#get_places').click(function () {
    onSuccess();
});

function onSuccess() {

    $('#location_listview').html("");



    for (var i = 0; i < 7; i++) {
        $('#location_listview').append("<li><a href=#main>" + i + "</a></li>");
    }


    $.mobile.changePage("#location_popup", {
        transition: "fade",
        role: "dialog",
        reverse: false
    });

 **$('#location_listview').listview('refresh');**

}

Upvotes: 0

Lucas Willems
Lucas Willems

Reputation: 7073

I think you have to put the li in the html code instead of append it with jquery. Have a look to this new fiddle : http://jsfiddle.net/lulu3030/WqssQ/1/

Upvotes: 0

Jonathan Naguin
Jonathan Naguin

Reputation: 14796

Before refresh the listview you have to wait until its initialization. Try with this:

$( "#location_popup" ).one( "pagebeforeshow", function( event ) {
        $('#location_listview').listview('refresh');
});

Demo here.

Upvotes: 1

Related Questions