JQM(jQueryMobile)问题与 AJAX 内容列表视图('refresh')不工作 [英] JQM (jQueryMobile) problem with AJAX content listview('refresh') not working

问题描述

这是对我正在做的事情的嘲讽:

This is a mock of what I'm doing:

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()(过去工作，但我将它放在页面函数之外，更改我如何加载页面的逻辑以节省加载时间)，使页面过渡到下一页，但我可以看到列表视图的样式是我想要的:

in the ajax call return if I add the .page() (which worked in the past but I had it out side of the page function, changing the logic on how I load pages to save on loading times), make the page transition to the next page but I can see the listview is styled the way I want:

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

删除 .page() 修复了过渡错误，但现在页面没有样式.我试过 listview('refresh') 甚至 listview('refresh',true) 但没有运气.

Removing .page() fixes the transition error but now the page does not style. I have tried listview('refresh') and even listview('refresh',true) but no luck.

关于如何让列表视图刷新的任何想法?

Any thoughts on how I can get the listview to refresh?

解决方案:

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

推荐答案

1. 一定要在ul元素上调用.listview
2. 如果之前没有设置样式，您只需调用 .listview()，机器人刷新功能.如果您的萤火虫设置正确，您应该会看到一条错误消息告诉您这一点.

1. Be sure to call .listview on the ul element
2. If it didn't style earlier, you just call .listview(), bot the refresh function. If your firebug setup is correct, you should have seen an error message telling you that.

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

I didn't have time to get down to creating some code before you posted your fix, but here's a little recommendation from me:

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

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

This is a bit nicer than a new global selector. Also - you don't need the div and you can provide a detailed selector if you have multiple ULs.

注意:以上代码需要data !== null.如果它为空 - 它会抛出一个错误.

caution: the above code requires data !== null. If it's null - it will throw an error.

这篇关于JQM(jQueryMobile)问题与 AJAX 内容列表视图('refresh')不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！