来自 Ajax 的列表视图调用在刷新浏览器后未更新

Question

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

"Uncaught ReferenceError: jQuery11110765894684009254_1423584082469 is not defined"

这是什么意思？如果可以解决这个问题，有没有办法让屏幕在 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>

Answer 1

Wmata 脚本无法加载，运行。这似乎与是否加载 JQuery 无关。

我做了一些测试，有时页面重新加载失败，有时第一次失败。

我冒昧地重写了你的一些代码来做一些测试。它表明 JQuery 几乎总是加载。但在某些情况下，脚本未运行ning 通过 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");        
});

我猜这是因为他们的服务器负载过高。或者只是简单地说 dev API 键是有限的。

Answer 2

您应该将 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 密钥仍然可能受到速率限制，这会导致您的特定问题。

来自 Ajax 的列表视图调用在刷新浏览器后未更新

Listview call from Ajax not updated after refreshing browser

html

javascript

ajax

jquery-mobile