微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在ajax调用完成功能后刷新jquery移动列表视图不起作用

我正在使用jQuery 1.3.1和phonegap 2.9.0开发一个应用程序.

使用PHP从服务器动态加载的所有数据ara.我的问题是每次listview项目更改时刷新调用都不起作用.我已经尝试和搜索了很多但还没有成功.
我认为,在listview完成之前调用刷新函数,但是在我尝试将这行代码放在任何地方都不起作用.

有帮助吗?

这是我的列表视图

<ul data-role="listview" data-autodividers="true" id="listview1" data-divider-theme="b" data-split-theme="b" data-filter-theme="b" data-split-icon="phone" data-filter="true" data-filter-placeholder="Search..." ></ul>

这是我如何使ajax调用服务器

$.ajax({url: JsonURL
           beforeSend: function(){ $.mobile.showPageLoadingMsg('b','Updating content...',true); },complete: function () { 
                                  console.log("refreshing..");
                                  $('#listview1').listview('refresh');
                                  $('#listview2').listview('refresh');
                                  $('#listview3').listview('refresh');
                                  $.mobile.hidePageLoadingMsg(); },contentType: "application/json; charset=utf-8",dataType: "json",async: true,success: function (result) {
                     data = result;
                     app.setupdevice();
                     $.mobile.changePage('#home',{transition: 'slide'});
                   },error: function (request,error) {
                            console.log(error.message);
                        }
            });

在这里我如何创建列表视图.每次列表项更改为使用新项更新列表时,此代码都会运行.

在成功函数中,我调用setupdevice,初始化listviews,如下所示.然后在完整的功能我刷新listview.由于某种原因,它只是第一次刷新.

items='';    
$.each(data.pois,function() {
             items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
            });

            $('#listview1').html(items);

这是我第一次遇到这个问题,我真的很生气,因为我无法找到为什么会这样.

解决方法

列表视图刷新应该在填充ul元素后执行,所以这样做:

items='';    
$.each(data.pois,function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview('refresh');

这样,您可以确保仅在追加内容后才会刷新列表视图.

编辑:

评论中提到的问题可以像这样解决

items='';    
$.each(data.pois,function() {
    items += '<li><a href="#"><h3>'+this.name+'</h3></a><a href="tel:\''+this.tel+'\'" >call</a></li>';
});

$('#listview1').html(items);
$('#listview1').listview().listview('refresh');

一个listview调用将初始化小部件,第二个将刷新它.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐