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

Question

我正在使用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);
                        }
            });

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

在success函数中，我调用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);

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

Answer 1

列表视图刷新应该在填充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调用将初始化小部件，第二个将刷新它。

Answer 2

您必须等待完全创建列表视图。 取自@ gajotres'的例子：

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).promise().done(function () {
  $(this).attr("data-role", "list view").listview().listview('refresh');
});

您可以通过等待promise的done方法来等待刷新。

Answer 3

我最近遇到了几乎同样的问题，解决了这个问题：

$.each(data.itemList, function(index, item) {
    console.log('index: ' + index);
    html += '<li><a href="#" class="detailslink" id="item_' 
         + index + '">' + item.SI_REGNBR + '<h2>Name: ' 
         + item.SI_NAME_EN + '</h2><p>Type: <strong>' 
         + item.SI_TYPE + '</strong></p></a></li>';
});

$('#dataView').empty();
$('#dataView').append($(html));
$('#dataView').trigger('create');
$('#dataView').listview('refresh');
$('#dataView ul').listview('refresh');

这是success: $.ajax调用的一部分。 HTML看起来像这样：

<ul data-role="listview" id="dataView" data-inset="true" data-filter-reveal="false" data-filter-placeholder="Search items..." data-filter="true"></ul>

我希望它有所帮助。