Question

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

“Uncaught ReferenceError：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>

Answer 1

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

此外，不是一次附加一个listitems，而是构建一个包含所有listitems的字符串，然后在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密钥速率受限，这导致您的特定问题。

Answer 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");        
});

我的猜测是，这是因为他们的服务器负载很高。或者只是简单地说dev API密钥是有限的。

刷新浏览器后，Ajax的Listview调用未更新

2 个答案: