Обновление списка jQuery для мобильных устройств - PullRequest
Новая
       0

Обновление списка jQuery для мобильных устройств

3 голосов
/ 08 августа 2011

Обновление списка работает должным образом с динамически создаваемым списком после загрузки, за исключением одной проблемы.К последнему тегу <li> в списке не применяются какие-либо стили.

Обновление фактически добавляет класс ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c ко второму или последнему тегу <li>.

Любые идеи, почему это будет происходить?

Прилагается функция, которая динамически генерирует список: 

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;

}

Ответы [ 4 ]

2 голосов
/ 26 сентября 2015

Иногда вам нужно создать экземпляр представления списка перед вызовом обновления.

Chrome должен выдавать ошибку, в которой говорится, что вы не можете применить обновление к списку, который не был создан.

Вы можетепопробуйте, это может решить вашу проблему (это решило точно такую ​​же проблему для меня). 

$('#locationList').listview().listview('refresh');
2 голосов
/ 14 ноября 2011

Из вашего кода похоже, что вы добавляете li к вашему списку за пределами этой функции, НО вы вызываете .listview ('refresh');внутри функции.

Так что это просто работает для всех ваших LI, потому что за исключением последнего, потому что он всегда после LI, который заставляет список обновляться с правильным внешним видом.

Решение: просто позвоните .listview ('refresh'); ПОСЛЕ вы добавили последний LI вне этой функции.Это также улучшит производительность, потому что вы обновите список только после того, как закончите динамически добавлять все новые элементы LI.

2 голосов
/ 20 апреля 2012

Звонок .listview("refresh") у меня не сработал. Создан базовый список без стиля.

Вот что у меня сработало: 

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 ***
        }
    });
}
0 голосов
/ 08 августа 2011

У меня также были некоторые проблемы с функцией обновления списка (jqm 1.0 beta1).В IE8 это даже хуже.

Так что мое решение - просто проверить, что jqm сделал с тегом <li>.
, и напрямую вставить код after-refresh-html.

Не элегантное решение, но оно работает.

...