Creating a "Breaking News" div with ajax if file exists?

Question

I'm wondering if there's a way to create a breaking news div that can appear even if a file exists on the server and even if a dynamic page has been statically saved for caching purposes.

E.g. every page (dynamic/static) has an empty with an id:

<div id="breaking"></div>

Is there a way, as the page loads, to have ajax check if a file (say breaking.html) exists on the server. If it doesn't the div remains empty, if it exists it populates the div with the contents of the file:

<div id="breaking">Edward Kennedy passes away. Details to follow.</div>

I thought I once saw something like this described. It would be a great way to possibly announce breaking news on both dynamic pages and pages that have been generated as static pages for reducing server load but may not be expired and regenerated for some time.

Answer 1

AJAX can't specifically check for file existence server-side (because Javascript is a client-side technology) but you could write your AJAX success and failure callbacks so that they behave correctly if it gets a 404 for the file you're requesting.

As a side-note, you don't necessarily need the empty div there in the html. You can always insert it with your AJAX success callback later.

Answer 2

You could try updating the div with jQuery such as in This stackoverflow question.

jQuery means you don't have to write too much boring Javascript and can focus on the cool stuff with a nice OO-interface. Here is a code snippet from the question:

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#some_div").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
}

Which should give you a head-start. Also a jQuery book might be a good idea if you want to use it alot (but the online docs are good too)

Answer 3

You can't check to see if a file exists using JavaScript/AJAX. You need some server side coding for that.

One way would be for your JS method to call a web service that could do the file.exist and if it exists, then it streams back the contents of the file. Otherwise, it just returns an empty stream. Then the client would see if the response length > 0, if so then display the breaking news content.

You could just have the JS method try to load the BreakingNews.html file and depending on how you have your 404s set up, load the content of it to the div. You just need to trap for 404 responses being returned when its empty. You could just have an empty BreakingNews.html (when no breaking news) file so that you can test for the content length rather than if the file existed.

Answer 4

Send the request and receive response from the server using AJAX, perhaps a JSON or XML response, and then use something similar to the following after processing your response:

 breakingDiv = document.getElementById("breaking");
 breakingDiv.innerHTML = TheContentsFromTheServerResponse;