jQuery mobile listview refresh

Question

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;

}

As Phill says, some code please! Also, be sure to validate your mark-up: there may be something daft missed which means jQM can't perform the listview.refresh call properly. — Ben
– Ben, Commented Aug 8, 2011 at 9:45
Thank you for the response. I posted the function that is responsible for creating the list. We have not converted the entire script over to jQuery yet, will be coming in the future. — Taylor
– Taylor, Commented Aug 8, 2011 at 16:22

Maks · Accepted Answer · 2011-11-14 00:03:26Z

2

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.

answered Nov 14, 2011 at 0:03

Maks

8,0156 gold badges45 silver badges69 bronze badges

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

Comments

Eric J. · Accepted Answer · 2012-04-20 07:16:16Z

2

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 ***
        }
    });
}

answered Apr 20, 2012 at 7:16

Eric J.

151k65 gold badges353 silver badges563 bronze badges

Comments

nccn · Accepted Answer · 2015-09-26 00:29:01Z

2

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

answered Sep 26, 2015 at 0:29

nccn

338 bronze badges

Comments

Vergil Lu · Accepted Answer · 2011-08-08 15:57:31Z

0

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.

answered Aug 8, 2011 at 15:57

Vergil Lu

5314 silver badges12 bronze badges

1 Comment

Taylor Over a year ago

Would like to keep the script as slim as possible, since it is going to be used as a location finder there is already some heavy JS going on that is crashing the browsers.

Collectives™ on Stack Overflow

jQuery mobile listview refresh

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related