Listview call from Ajax not updated after refreshing browser

Question

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>

I'd bet your code it attempting to update the dom before it is ready. Check out the answer to this question http://stackoverflow.com/questions/5622581/jquery-mobile-document-ready-equivalent — Gordon Bockus, Feb 10 '15 at 16:35
I did some tests for myself with your code. And I can't see it is related to the updated page. Mostly it occurs when you update. But it also occurs on first load. — Einar Sundgren, Feb 10 '15 at 16:38

score 1 · Accepted Answer · answered Feb 10 '15 at 18:43

1

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.

answered Feb 10 '15 at 18:43

ezanker

24,628
1
20
35

Hi there, I tested your code and it works perfectly. The last thing I was wondering is how can make this auto-refresh effectively? for example if I wanted this to refresh every 20 seconds. Any suggestions? – speedracer2003 Feb 10 '15 at 21:21
I ran into an issue. Your code works perfectly for 1 UL. However I'm having trouble making it work it for seperate UL's in the same page. For example the only UL in the code is "test1". What if I have "test2", "test3", ect, how do I distinguish the which UL lists I can append to the "html" call? – speedracer2003 Feb 23 '15 at 04:46
@speedracer2003, Not sure I understand the question. $("#test1").append(), $("#test2").append(), $("#test3").append(), etc. – ezanker Feb 23 '15 at 14:06
For example in the code there is "test1"
What if I want to seperate certain list items and place them in other listviews on the same page like
or
– speedracer2003 Feb 23 '15 at 21:32
Awesome! Awesome! Awesome! Thank you so much =D – speedracer2003 Feb 24 '15 at 15:06

score 0 · Answer 2 · answered Feb 10 '15 at 16:50

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.

Listview call from Ajax not updated after refreshing browser

2 Answers2