JQM (jQueryMobile) проблема с просмотром списка содержимого AJAX ("обновить") не работает

Question

Это издевательство над тем, что я делаю:

function loadPage(pn) {
    $('#'+pn).live('pagecreate',function(event, ui){
        $('#'+pn+'-submit').click( function() {
            $.mobile.changePage({
                    url: 'page.php?parm=value', 
                    type: 'post', 
                    data: $('form#'+pn+'_form')
                },'slide',false,false);

            loadAjaxPages(pn);
        });
});

function loadAjaxPages(page) {
    // this returns the page I want, all is working
    $.ajax({
        url: 'page.php?parm=value',
        type: 'POST',
        error : function (){ document.title='error'; }, 
        success: function (data) {                  
            $('#display_'+page+'_page').html(data); // removed .page(), causing page to transition, but if I use .page() I can see the desired listview
        }
    });
}

в возвращаемом вызове ajax, если я добавлю.page() (который работал в прошлом, но у меня он был вне функции страницы, меняя логику того, как я загружаю страницы, чтобы сэкономить на времени загрузки), сделать переход страницы в на следующей странице, но я вижу, что просмотр списка оформлен так, как я хочу:

$('#display_'+page+'_page').html(data).page();

Удаление.page () исправляет ошибку перехода, но теперь страница не стилизуется. я пытался listview('refresh') и даже listview('refresh',true) но не повезло.

Любые мысли о том, как я могу обновить список просмотра?

Решение:

$.ajax({
    url: 'page.php?parm=value',
    type: 'POST',
    error : function (){ document.title='error'; }, 
    success: function (data) {                  
        $('#display_'+page+'_page').html(data);
        $("div#name ul").listview(); // add div wrapper w/ name attr to use the refresh
    }
});

Answer 1

1. Обязательно позвони .listview на элементе ul
2. Если это не стиль раньше, просто позвоните .listview(), бот функция обновления. Если ваш firebug настроен правильно, вы должны были увидеть сообщение об ошибке, сообщающее вам об этом.

У меня не было времени заняться созданием кода, прежде чем вы опубликовали свое исправление, но вот небольшая рекомендация от меня:

if(data !== null){ $('#display_'+page+'_page').html(data).find("ul").listview() }

Это немного лучше, чем новый глобальный селектор. Кроме того - вам не нужен div, и вы можете предоставить подробный селектор, если у вас есть несколько UL.

Внимание: приведенный выше код требует data !== null, Если он нулевой - он выдаст ошибку.

Answer 2

Если вы добавляете элементы в просмотр списка, вам нужно вызвать метод refresh() для него, чтобы обновить стили и создать любые вложенные списки, которые будут добавлены. Например:

. $('# MyList') ListView('Обновить');

Обратите внимание, что метод refresh() влияет только на новые узлы, добавленные в список. Это сделано из соображений производительности. Все элементы списка, уже улучшенные, будут игнорироваться процессом обновления. Это означает, что если вы измените содержимое или атрибуты уже расширенного элемента списка, они не будут отражены. Если вы хотите обновить элемент списка, замените его новой разметкой перед вызовом обновления.

больше информации здесь.