Initially, I want to mention that the code below functions perfectly when I launch a new browser tab and enter my web server's URL. It also works fine when I reload the page (using F5 or Ctrl-R). However, it only partially works if I reopen a closed browser window and the browser restores my old tabs. In this scenario, today's date gets updated and displayed as expected (see the simple code below), but the getJSON() call doesn't seem to be triggered. The browser continues to show data from the previous session until I manually refresh the page (using F5) to update the data.
I am confident that the issue is not with the server. So, what else could possibly be causing this problem?
The browsers being used are Firefox and Chrome, both running the latest versions.
This is the code utilized in index.html
<script>
$(document).ready(onReady());
</script>
and this is the code found in helper.js
var onReady = function() {
// Display current date
var dateText = moment().format("dddd, Do MMMM YYYY");
var dateHTML = "<h2>" + dateText + "</h2>";
$("#date-col").append(dateHTML);
:
:
// Retrieve data from server and display it
var statText = "Statistics:";
$.getJSON("courses/starter", function(data) {
statText = statText.concat(" " + data.count + " starter");
$.getJSON("courses/dessert", function(data) {
statText = statText.concat(", " + data.count + " dessert");
$("#statistics").text(statText);
});
});
}