Developer Snippet - Pretty AJAX Errors

Tired of drudging through the console when looking for the cause of AJAX errors? Sick of trying to scan the stringified .NET or webservice error pages for the underlying error? Do I have the handy hint for you!

The following snippet creates a global listener for AJAX errors, shows a jGrowl reporting the error thrown, and then allows you to view the resulting error page - all without breaking the user’s workflow.

Example on JSFiddle.

It was designed to work with .NET applications and webservice error messages which both return error pages, but there’s no reason why you can’t use this with RESTful services (or anything) returning error codes and error messages.

Requires: jQuery, jGrowl JS and jGrowl CSS

In-Page Element Updating/Refreshing

if ($('.autoupdate')[0]) {
    setInterval(function () {
        $.get(document.location, function (data) {
            $('.autoupdate').each(function () {
                var html = $(data).find('#' + $(this).id).html();
            });
        });
    }, 10000);
}​

This is a great snippet from the Designer/Developer community at Forrst. Essentially it refreshes the content of any element in the page that has the “autoupdate” class on it. It uses the jQuery AJAX load method to get the page and replaces all the content within the new content from their matching IDs.

I’ve spoken before about how costly the $.load() method is, but once more with feeling: it makes another call to the server for the entire page structure and then returns the elements from within that. This could be improved by using targeted AJAX calls that don’t get/return entire pages, but it still makes for a great prototype.