Scope of variables in JavaScript

JavaScript
1

Hi,

I’m using jQuery’s getJSON method to get the current date from a foreign server.
I however, should this request fail (e.g. if the server is down), I want to have my page fall back to a sensible default.

What I’d like to do is this:
var date = “sensible default”
$.getJSON(url, function(data){ date = new Date(data.datetime); });
if request was successful date will contain new Date(data.datetime);
if request was unsuccessful date still contains “sensible_default”

What I have is this:
var timezone = “Europe/Berlin”;
var date = “sensible_default”;
$.getJSON(“http://json-time.appspot.com/time.json?tz=“+timezone+”&callback=?”,
function(data){ date = new Date(data.datetime); });
alert(date);

But this produces an alert of “sensible_default”, despite the fact that the getJSON request fired correctly.

Am grateful for any help.

2

You may want to read the docs on $.getJSON and $.ajax for errors & 404 (for $.ajax only) to help you out.

3

Hi,
I had a look at the jQuery documentation for $.getJSON and it didn’t really help.
I found an “error” method which you can chain to your getJSON request, but it doesn’t seem to work when the server answers with, for example, a 503.

I tried this, but when the server answered with a 503, it failed silently:
$.getJSON(url, function(data){ date = new Date(data.datetime); }).error(function() { alert(“error”); });

I would really appreciate any help on this.

4

http://api.jquery.com/jQuery.ajax/

statusCode:

A map of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:

$.ajax({
  statusCode: {
    404: function() {
      alert('page not found');
    }
  }
});

If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error, they take the same parameters as the error callback.

5

Ok, so a look at the documentation shows that . getJSON() is a shorthand for .ajax(…) with specific parameters.
So, I rewrote my code as this:

$.ajax({
  dataType: 'jsonp',
  jsonp: 'jsonp_callback',
  url: 'http://a-different-domain.com',
  success: function (json) {
    alert("It worked");
  }
});

This works great and, as long as the remote server is available, my site shows me a popup saying “It worked”.

What I would now like to do, is to implement some error handling for when the server returns anything other than 200 OK response code (e.g. 404 or 503)

I read the documentation and found that $.ajax() returns a jQuery XMLHttpRequest (jqXHR) object, which provides .error(), .success(), and .complete() methods.

These methods take a function argument that is called when the $.ajax() request terminates.

I therefore made sure that the remote server is returning a 404 and tried:

$.ajax({
  dataType: 'jsonp',
  jsonp: 'jsonp_callback',
  url: 'http://a-different-domain.com',
  success: function (json) {
    alert("It worked");
  }
}).error(function() { alert("error"); });

I also tried:

$.ajax({
  dataType: 'jsonp',
  jsonp: 'jsonp_callback',
  url: 'http://a-different-domain.com',
  success: function (json) {
    alert("It worked");
  },
  statusCode: {
    404: function() {
      alert('page not found');
    }
  }
});

but both of these fail silently.

What am I missing?