在完成函数的ajax调用后刷新jquery移动列表视图不起作用

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

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

有帮助吗？

这是我的列表视图

这是我如何使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，如下所示。 然后在完整的function我刷新listview。 由于某种原因，它只是第一次刷新。

 items=''; $.each(data.pois, function() { items += '
'+this.name+'call
'; }); $('#listview1').html(items); 

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

Answer 1

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

 items=''; $.each(data.pois, function() { items += '
'+this.name+'call
'; }); $('#listview1').html(items); $('#listview1').listview('refresh'); 

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

编辑：

注释中提到的问题可以像这样解决：

 items=''; $.each(data.pois, function() { items += '
'+this.name+'call
'; }); $('#listview1').html(items); $('#listview1').listview().listview('refresh'); 

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

Answer 2

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

 items=''; $.each(data.pois, function() { items += '
'+this.name+'call
'; }); $('#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 += '
' + item.SI_REGNBR + '
Name: ' + item.SI_NAME_EN + '
Type: ' + item.SI_TYPE + '
'; }); $('#dataView').empty(); $('#dataView').append($(html)); $('#dataView').trigger('create'); $('#dataView').listview('refresh'); $('#dataView ul').listview('refresh'); 

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

我希望它有所帮助。