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調用刷新瀏覽器後未更新

回答

相關問題