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

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

“未捕获的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>

来源

2015-02-10 speedracer2003

我敢打赌你的代码试图在它准备好之前更新dom。看看这个问题的答案http://stackoverflow.com/questions/5622581/jquery-mobile-document-ready-equivalent – 2015-02-10 16:35:21

我用自己的代码为自己做了一些测试。我看不到它与更新的页面有关。大多数情况下会在更新时发生。但它也会在第一次加载时发生。 – 2015-02-10 16:38:15

您应该将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 key是速率有限的，这是你的特定问题。

来源

2015-02-10 18:43:43 ezanker

嗨，我测试了你的代码，它完美的工作。我想知道的最后一件事是如何有效地进行自动刷新？例如，如果我想每20秒刷新一次。有什么建议么？ – speedracer2003 2015-02-10 21:21:26

@ speedracer2003，只需使用setTimeout（）：http://jsfiddle.net/ezanker/f9Lpwkhc/ – ezanker 2015-02-11 16:56:23

真棒！谢谢你太多了！它工作得很好= D – speedracer2003 2015-02-11 17:08:06

形式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密钥是有限的。

来源

2015-02-10 16:50:30

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

回答

相关问题