CODEWITHSUNDEEP
jquery-mobile
Taylor
Taylor

Reputation: 75

jQuery mobile listview refresh

I have the listview refresh functioning appropriately with a dynamically built list after load except for one issue. The last <li> tag in the list does not get any styling applied to it.

The refresh actually adds the the ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c class to the second to last <li> tag.

Any ideas why this would be happening?

Attached is the function that is dynamically generating the list:

function createSidebarEntry(marker, name, phone, address, distance) {
  var saddr = document.getElementById('addressInput').value;
  var li = document.createElement('li');
  var html = '' + name + ' (' + distance.toFixed(1) + ' miles)' + address + phone +'<a href="http://maps.google.com/maps?saddr='+ saddr +'&daddr=' + address +'" /></a>';
  li.innerHTML = html;

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

  return li;

}

Upvotes: 3

Views: 7322

Answers (4)

nccn
nccn

Reputation: 33

Sometimes you need to instantiate listview view before calling the refresh.

Chrome should be giving you an error saying that you cant apply a refresh to a listview that isnt instantiated.

You can try this out, it might solve your problem (it solved this exact same issue for me).

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

Upvotes: 2

Eric J.
Eric J.

Reputation: 150108

Calling .listview("refresh") did not work for me. It created a basic list, without styling.

This is what worked for me:

function updateData()
{
    $.ajax({
        url: '@Html.Raw(ajaxUrl)',
        async: false,
        beforeSend: function () { $.mobile.showPageLoadingMsg(); },
        complete: function ()
        {
            $.mobile.hidePageLoadingMsg();
            $("ul:jqmData(role='listview')").listview();
        },
        success: function (data, textStatus, jqXHR)
        {
            $('#myDiv').html(data);
            $('#myDiv').trigger("create"); // *** THIS IS THE KEY ***
        }
    });
}

Upvotes: 2

Maks
Maks

Reputation: 7935

From your code, it looks like you are adding the li to your listview outside of that function, BUT you are calling .listview('refresh'); inside the function.

So It just happens to work for all your LIs because except for the last one, because its always the following LI that causes the list to be refereshed with the correct look&feel.

Solution: just call .listview('refresh'); AFTER you have added the last LI outside of this function. It will also have the effect of improving performance becuse you will only be refreshing the listview once you have finished dynamically adding all your new LI elements.

Upvotes: 2

Vergil Lu
Vergil Lu

Reputation: 531

I also had some problem with listview refresh function( jqm 1.0 beta1 ). On IE8, it's even worse.

So my solution is simply inspect what jqm has done to <li> tag.
And directly insert the after-refresh-html-code.

Not an elegant solution, but it works.

Upvotes: 0

Related Questions