views:

22

answers:

2

Hi,

It seems that there are no error handling facility in the Jquery.Form plugin, which is very frustrating. Even though the documentation says we can use the $.ajax options, I still cannot make use of the 'error' option when the server returns an error, especially the 500 and 400 series. Is it that this plugin cannot handle any error at all from the server or is it a bug, etc? Can someone please tell me how I can handle errors (400, 500, etc) with this plugin? I need your help... All I want is a simple error handling... Thank you.

$("#uploadingImg").hide();

var options = {//Define ajax options
    type: "post",
    target: "#responsePanel",
    beforeSend: function(){
        $("#uploadingImg").show();
    },
    complete: function(xhr, textStatus){
        $("#uploadingImg").hide();
    },
    success: function(response, statusString, xhr, $form){
        // I know what to do here since this option works fine
    },
    error: function(response, status, err){
        // This option doesn't catch any of the error below, 
        // everything is always 'OK' a.k.a 200
        if(response.status == 400){
            console.log("Sorry, this is bad request!");
        }
        if(response.status == 601){
            sessionTimedOut();
        }
    }
}
$("#polygonUploadForm").submit(function(){
    $(this).ajaxSubmit(options); // Using the jquery.form plugin
    return false;
});
+1  A: 

The form plugin doesn't manipulate the response code in any way, if you're seeing a status code of 200 then your server is returning a status code of 200, which means there was no HTTP error.

You can either:

  • Make your server return something other than a 200
  • Or, do the check in your success handler for whatever error comes back, searching for an #error, etc.

Though, apart from the response code do note that the form plugin will call your error handler when any other error occurs that it can't handle, even if it's handling the response after it comes back.

Nick Craver
@Nick Craver: Thank you for your very informative answer. This is a bit of a shame that the plugin doesn't handle error though. So why did he say that we can use $.ajax options in his doc... Anyways, so do you mean that in the success handler, I can look for i.e. 400 and something with it? Because I tried and do an 'if' statement for a 400 in the success handler, so it can output in firebug using console.log() but nothing happens...
Shaoz
@Shaoz - I think your server isn't returning a 400, in your handler do a `console.log(response.status)` what do you see?
Nick Craver
@Nick Craver: Firebug shows 'undefined'. But on top of 'undefined', it says 'NetworkError: 400 Bad Request' and that's what I wanna catch and do something with.
Shaoz
@Shaoz - if you just put an `alert("test")` in your error handler, nothing else, it doesn't show?
Nick Craver
@Nick Craver: Just tried it now... Nothing shows up at all.
Shaoz
@Shaoz - a 400 will be a bit unpredictable, since it isn't a problem with the response, but the request itself is fubar, in general this just isn't handled well...I suppose you could check for an empty response (or null status) in your `success` handler as a work-around, not sure of a better approach if the response code isn't being set. Also just curious, have you tried this across various browsers?
Nick Craver
@Nick Craver: Tried it in Chrome, which says 'server responded with a status of 400'. So I guess it'll be the same in Safari.
Shaoz
A: 

Just found out that the jquery.form plugin itself doesn't handle server error, because it doesn't have access to response headers due to the way 'file input' tag handles file upload. So I think the W3C needs to review that troublesome tag that not only doesn't let you style it with CSS but also doesn't make server response handling easy.

There must be a way around it though...

Let me know if I said something wrong and let me know your thoughts about this 'file input' tag...

Shaoz