What is jQuery equivalent to Ajax.Responders.register prototype?

Question

Is there a jQuery equivalent for this prototype code?

Ajax.Responders.register({ onException: function(x,y) { if(y.message!="Syntax error") new Insertion.After("toperrorbox","<p style='color:red'>"+y.message+"</p>"); } }); 

Answer 1

http://docs.jquery.com/Ajax/ajaxError#examples

 $('#toperrorbox').ajaxError(function (event, request, settings) { $(this).after("<p style='color:red'>"+ request.responseText +"</p>"); } 

Attach a function that will execute whenever an AJAX request fails.

Answer 2

The Ajax.Responders prototype is a global listener that listens for ALL ajax events. jQuery really has an equivalent. Global Ajax Events .

The syntax is slightly different due to the nature of jQuery, but something similar to this should do the trick:

 $('#toperrorbox').bind('ajaxError', function (event, XMLHttpRequest, ajaxOptions, thrownError) { // thrownError only passed if an error was caught // this == dom element listening var message = thrownError === undefined? XMLHttpRequest.responseText : thrownError.message; $(this).after("<p style='color:red'>"+ message +"</p>"); } 

In this case, XMLHttpRequest.responseText will contain the body (if any) returned from the server on a failed request. And thrownError will contain the actual exception, which, I believe, you really are after. But I would recommend checking to see if the exception actually passed before trying to print its message, which I did in my example. If he caught the exception, he will use this message, but if not, he will use the server response.

It is worth noting that with jQuery, all events are always associated with something. Usually DOM Node, but maybe window or document . If you want to do the same without binding a specific element to an action (for example, the above example), you can bind the event to a window and select the elements to work in your callback, like this

 $(window).bind('ajaxError', function (event, XMLHttpRequest, ajaxOptions, thrownError) { // thrownError only passed if an error was caught // this == dom element listening var message = thrownError === undefined? XMLHttpRequest.responseText : thrownError.message; $('#toperrorbox').after("<p style='color:red'>"+ message +"</p>"); } 

This can allow you more control over events, since you don’t need to remember which elements they are attached to, and if you didn’t use anonymous functions, you could unbind use special callbacks as you see fit.

Answer 3

I do not know the prototype, but I'm sure it is something like this:

 $.ajax({ error: function(xhr, textStatus, exception) { if (exception.message != "Syntax error") { var newItem = '<p style="color:red">' + exception.message + '</p>'; $('#toperrorbox').after(newItem); } } }); 

Edit: or you can try something more global:

 $('#toperrorbox').ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError) { if (thrownError != "Syntax error") { var newItem = '<p style="color:red">' + thrownError + '</p>'; $(this).after(newItem); } })