刷新jQuery Mobile的列表视图后，功能齐全ajax调用不工作 [英] Refresh jquery mobile listview after ajax call in complete function doesn't work

问题描述

我正在开发使用jQuery 1.3.1和2.9.0的PhoneGap的应用程序。

I am developing an application using jQuery 1.3.1 and phonegap 2.9.0.

所有数据ARA使用PHP动态加载从服务器。我的问题是刷新不能正常工作的每一个项目列表视图改变时间。我试过搜查了很多，但没有成功呢。
我认为，是完成列表视图前刷新函数被调用，但无论我尝试把此行$ C $的c那么它是行不通的。

All the data ara loaded dynamically from the server using php. My problem is that the refresh call doesn't work every time the listview items changing. I've tried and searched a lot with no success yet. What i think, is that the refresh function is called before the listview is completed, but anywhere i try to put this line of code it doesn't work.

任何帮助吗？

这是我的列表视图

<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调用服务器

here is how i make tha ajax call to the server

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

在这里我如何创建列表视图。这code运行每次列表改变的项目与新项目，以更新列表。

and here how i create the listview. This code runs every time the items of the list change to update the list with the new items.

在成功函数我叫 setupdevice ，如下图所示whtich初始化列表视图。然后在功能齐全我正在刷新列表视图。出于某种原因，它的清爽只有第一次。

In the success function i call setupdevice whtich initializes the listviews as shown below. Then in the complete function i am refreshing the listview. For some reason the it's refreshing only the first time.

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

这是我第一次到这个问题，我真的很苦恼，因为我找不到为什么发生这种情况。

It's the first time i reach this issue and i am really annoyed because i can't find why this is happening.

推荐答案

列表视图刷新应该ul元素已被填充后执行，因此，像这样做：

Listview refresh should be executed after ul element has been populated, so do it like this:

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

这种方式可以确保列表视图会内容已被附加后才被刷新。

This way you can be sure that listview is going to be refreshed only after content has been appended.

在评论中提及的问题是可以解决的是这样的：

Problem mentioned in the comment can be solved like this:

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

首先列表视图通话将初始化窗口小部件和第二的意志会刷新。

First listview call will initialize widget and a second will will refresh it.

这篇关于刷新jQuery Mobile的列表视图后，功能齐全ajax调用不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！