AJAX 内容 listview('refresh') 的 JQM (jQueryMobile) 问题不起作用答案

【问题标题】：JQM (jQueryMobile) problem with AJAX content listview('refresh') not workingAJAX 内容 listview('refresh') 的 JQM (jQueryMobile) 问题不起作用
【发布时间】：2011-08-01 14:34:51
【问题描述】：

这是对我正在做的事情的模拟：

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

如果我添加 .page()（过去可以使用，但我将它放在页面函数之外，更改了加载页面的逻辑以节省加载时间），则在 ajax 调用返回中，使页面转换到下一页，但我可以看到列表视图的样式是我想要的：

$('#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
    }
});

【问题讨论】：

收到您的消息要检查一下，但我知道您现在有了解决方案。 :)
如果有人需要更多信息，这是我的问题stackoverflow.com/questions/5589358。

标签： ajax listview jquery jquery-mobile

【解决方案1】：

请务必在 ul 元素上调用 .listview
如果之前没有设置样式，你只需调用.listview()，bot 刷新函数。如果您的 firebug 设置正确，您应该会看到一条错误消息告诉您。

在您发布修复程序之前，我没有时间开始创建一些代码，但这里有一个我的小建议：

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

这比新的全局选择器好一点。另外 - 您不需要 div，如果您有多个 UL，您可以提供详细的选择器。

注意：以上代码需要data !== null。如果它为 null - 它将引发错误。

【讨论】：

只是没有在 ajax 调用之后添加标记。唯一有效的是 page() ，但随后过渡被搞砸了。拔我的头发！！！还在UL上加了个name属性，这样叫，还是不行
我明白了。必须在 ul 元素的 ajax 调用中调用 listview()。必须添加一个 div 包装器并像这样调用它： $("div#name ul").listview();
你做了我期望你会做的事；）我编辑给你一点修正。

【解决方案2】：

如果您将项目添加到列表视图，则需要对其调用 refresh() 方法来更新样式并创建添加的任何嵌套列表。例如：

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

请注意，refresh() 方法仅影响附加到列表的新节点。这样做是出于性能原因。刷新过程将忽略任何已增强的列表项。这意味着如果您更改已增强列表项的内容或属性，这些将不会被反映。如果您想要更新列表项，请在调用刷新之前将其替换为新标记。

更多信息here。

【讨论】：