完整功能中的ajax调用后刷新jquery mobile listview不起作用

Posted 2023-05-09

【中文标题】完整功能中的ajax调用后刷新jquery mobile listview不起作用

【英文标题】：Refresh jquery mobile listview after ajax call in complete function doesn't work

【发布时间】：2013-07-15 23:21:31

【问题描述】：

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

所有使用php从服务器动态加载的数据。我的问题是每次列表视图项目更改时刷新调用都不起作用。我已经尝试并搜索了很多，但还没有成功。 我的想法是，在列表视图完成之前调用了刷新函数，但是我尝试放置这行代码的任何地方都不起作用。

有什么帮助吗？

这是我的列表视图

<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>

这是我如何对服务器进行 tha 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 初始化列表视图，如下所示。然后在完整的功能中我正在刷新列表视图。出于某种原因，它只是第一次刷新。

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

这是我第一次遇到这个问题，我真的很生气，因为我找不到发生这种情况的原因。

【参考方案1】：

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

【讨论】：

感谢您的回答，但我已经尝试过了，但并不能解决问题。我不断收到错误“未捕获的错误：无法在初始化之前调用 listview 上的方法；试图在 file:///android_asset/www/js/jquery-1.9.1.min.js:3 处调用方法'refresh'”

这个问题很容易解决，我会把它添加到我的答案中。

我也试过了。我做了很多搜索并尝试了很多事情。如果我这样做，那么我会收到一个奇怪的错误“Uncaught TypeError: Cannot read property 'jQuery191035519159212708473' of undefined at file:///android_asset/www/js/jquery-1.9.1.min.js:5”。

那么我唯一能问你的就是添加更多代码，我想看看在 ajax 调用中的什么时候将结果附加到列表视图。或者代替 listview('refresh') 你可以使用 $('#contentID')trigger('create');其中#content ID 是您的 data-role="content" DIV 的 ID。

我更新了我的问题。如果你能提供一个接近我的问题的例子，我将不胜感激。再次感谢您！

【参考方案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 方法来等待刷新。

【参考方案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');

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

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

希望对你有帮助。