CODEWITHSUNDEEP
javascripthtmlajaxjquery-mobile
speedracer2003
speedracer2003

Reputation: 171

Listview call from Ajax not updated after refreshing browser

I have been trying to figure out why my code below fails when I refresh the browser. For example the code works fine when first accessing the page, however as soon as I refresh, the list goes blank for a couple of seconds. Then after those seconds pass I'm able to see the content again by refreshing the screen. I performed the "Inspect Element" option and it showed me the following error

"Uncaught ReferenceError: jQuery11110765894684009254_1423584082469 is not defined"

What does this mean? If this can be fixed is there a way to make the screen refresh automatically after 20 or 30 seconds? Before I forget, the API key that I'm using is a temporary key found here.

https://developer.wmata.com/Products

Thanks in advance.

<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>

Upvotes: 1

Views: 374

Answers (2)

ezanker
ezanker

Reputation: 24738

You should put the AJAX call within the pagecreate event so that it runs at the correct time.

Also, instead of appending the listitems one at a time, build a string with all the listitems and then append them to the DOM once after the for loop:

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

This will improve your code and performance, but it could still be that the temporary api key is rate limited, and that is causing your particular problem.

Upvotes: 1

Einar Sundgren
Einar Sundgren

Reputation: 4423

The script form Wmata fails to load and run. This has nothing to do with JQuery being loaded or not it seems.

I made a few tests and on some occasions the page failed on reload and on some occasions it failed the first time.

I took the liberty to rewrite some of your code to do some testing. It shows that JQuery almost allways loads. But at some occasions the script is not running past the Wmata-function.

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

My guess is that this is because of high load on their servers. Or just simply that the dev API key is limitied.

Upvotes: 0

Related Questions