刷新浏览器后未更新来自 Ajax 的 Listview 调用答案

【问题标题】：Listview call from Ajax not updated after refreshing browser刷新浏览器后未更新来自 Ajax 的 Listview 调用
【发布时间】：2015-02-10 16:23:21
【问题描述】：

我一直试图弄清楚为什么刷新浏览器时下面的代码会失败。例如，代码在第一次访问页面时工作正常，但是一旦我刷新，列表就会空白几秒钟。然后在那几秒钟过去后，我可以通过刷新屏幕再次看到内容。我执行了“检查元素”选项，它显示了以下错误

“未捕获的引用错误：jQuery11110765894684009254_1423584082469 未定义”

这是什么意思？如果可以解决这个问题，有没有办法让屏幕在 20 或 30 秒后自动刷新？在我忘记之前，我使用的 API 密钥是在这里找到的临时密钥。

https://developer.wmata.com/Products

提前致谢。

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>My page</h1> 
    </div>
    <div role="main">
        <ul data-role="listview" data-inset="true" id="test1"></ul>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>My page footer</h1>
    </div>
</div>

<script>
    $.ajax({
        url: 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/B01,F01?api_key=kfgpmgvfgacx98de9q3xazww',
        dataType: 'jsonp',
    }).success(function (data){

        for(var i =0; i < data.Trains.length; i++)
        {       
            $("#test1").append($("<li><a href='#'>Line: "+data.Trains[i].Line+" Cars:"+data.Trains[i].Car+" Destination:"+data.Trains[i].DestinationName+" Min: "+data.Trains[i].Min+"</a></li>"));
        }
        $("#test1").listview("refresh");        
    });
</script>

【问题讨论】：

我敢打赌你的代码会在准备好之前尝试更新 dom。看看这个问题的答案stackoverflow.com/questions/5622581/…
我用你的代码为自己做了一些测试。而且我看不到它与更新的页面有关。大多数情况下，它会在您更新时发生。但它也会在第一次加载时发生。

标签： javascript html ajax jquery-mobile

【解决方案1】：

您应该将 AJAX 调用放在 pagecreate 事件中，以便它在正确的时间运行。

另外，不是一次添加一个列表项，而是构建一个包含所有列表项的字符串，然后在 for 循环之后将它们一次添加到 DOM：

$(document).on("pagecreate", "#page1", function(){
    $.ajax({
        url: 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/B01,F01?api_key=kfgpmgvfgacx98de9q3xazww',
        dataType: 'jsonp',
    }).success(function (data){
        var html = ''
        for(var i =0; i < data.Trains.length; i++)
        {       
            html += "<li><a href='#'>Line: "+data.Trains[i].Line+" Cars:"+data.Trains[i].Car+" Destination:"+data.Trains[i].DestinationName+" Min: "+data.Trains[i].Min+"</a></li>";
        }
        $("#test1").append(html).listview("refresh");        
    });    
});

这将改善您的代码和性能，但仍然可能是临时 api 密钥受到速率限制，这会导致您的特定问题。

【讨论】：

您好，我测试了您的代码，它运行良好。我想知道的最后一件事是如何有效地进行自动刷新？例如，如果我希望它每 20 秒刷新一次。有什么建议吗？
我遇到了一个问题。您的代码完美适用于 1 UL。但是，我无法使其适用于同一页面中的单独 UL。例如，代码中唯一的 UL 是“test1”。如果我有“test2”、“test3”等，如何区分可以附加到“html”调用的 UL 列表？
@speedracer2003，不确定我是否理解这个问题。 $("#test1").append()、$("#test2").append()、$("#test3").append()等
例如代码中有“test1”
如果我想分开怎么办某些列表项并将它们放置在同一页面上的其他列表视图中，例如
或
太棒了！惊人的！惊人的！非常感谢=D

【解决方案2】：

Wmata 脚本表单无法加载和运行。这与是否加载 JQuery 无关。

我做了一些测试，在某些情况下页面在重新加载时失败，在某些情况下第一次失败。

我冒昧地重写了您的一些代码以进行一些测试。它表明 JQuery 几乎总是加载。但在某些情况下，脚本不会通过 Wmata 函数运行。

if (window.jQuery) {  
    alert("JQ is loaded");  
} 

$.ajax({
    url: 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/B01,F01?api_key=kfgpmgvfgacx98de9q3xazww',
    dataType: 'jsonp',
}).success(function (data){
    alert("Wmata is loaded");  

    for(var i =0; i < data.Trains.length; i++)
    {       
        $("#test1").append($("<li><a href='#'>Line: "+data.Trains[i].Line+" Cars:"+data.Trains[i].Car+" Destination:"+data.Trains[i].DestinationName+" Min: "+data.Trains[i].Min+"</a></li>"));
    }
    $("#test1").listview("refresh");        
});

我的猜测是，这是因为他们的服务器负载很高。或者只是开发 API 密钥是有限的。

【讨论】：