0

I have been working with AJAX for a while now, I can get the form to submit via ajax, I can get the Div to reload via ajax, add, edit, delete via ajax. What i am aiming on now is better understanding on how to display error messages.

What I think is an error message Suppose a form asks for a name to be submitted, when the user does not enter his name and hits the submit button then the error message should be shown asking user the enter the information required.

At present I am managing this inside the success part of AJAX, is this the right way to do it? If yes then what is AJAX error: function for? Shouldn't the error message where user did not enter the required information be shown through error: function?

This is what my AJAX calls look like and I want to improve it.

$.ajax({
    url: 'demo.php', //your server side script
    data: $("#form").serialize(),
    type: 'POST',
    beforeSend: function () {
        $('#dvloader').show();
    },
    success: function (data) {
    $('#dvloader').hide();
    $("#message").html(data);
    }
});

I also wanted to know should hiding a loading gif be iside the success as well, although it works but I want to know if this is the right way to do it.

I will really appreciate anyone's feedback on it.

Shairyar
  • 3,268
  • 7
  • 46
  • 86
  • 2
    Why not read the docs? They explain pretty well what `error` is > A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." – BenM Dec 11 '14 at 11:17
  • when the script you are calling time's out, it should go to the `error` block, thats an example. the one you're having is your user defined error (wrong username/password, required fields, etc.) actually you can find that out on the manual. http://api.jquery.com/jquery.ajax/ – Kevin Dec 11 '14 at 11:18
  • Thanks @Ghost, so user defined error are to be handled in `success` while the timeout and other related errors are to be handled by `error` How do we know that script has timed out and it is time to call the `error` part of `AJAX` – Shairyar Dec 11 '14 at 11:21
  • there are several things for error block, all available in the docs you can refer to them as well, but quick answer is if something is expected and response is not that what you expect then, although as suggested by Ghost- timeout if request is taking time longer than usual. – Jai Dec 11 '14 at 11:21
  • 2
    @Baig actually thats just an example, you can consult the manual for details, and yes you can account for timeouts in the `error` block (i think it goes inside the `textStatus` argument), yes for things such as `username/password not found` things, you can handle those inside the success block, since you're the one coding it, you can handle you own error handling inside it. – Kevin Dec 11 '14 at 11:24

4 Answers4

1

At present I am managing this inside the success part of AJAX, is this the right way to do it?

That's somewhat subjective.

If yes then what is AJAX error: function for?

That is primarily for HTTP errors (e.g. when the server side code does't work the way you expect it to) although it will also fire if (for example) a JSON response is malformed and can't be parsed.

A case could be made that, given inappropriate data being submitted through the form, your server side code should throw an HTTP error code (in which case the error handler would fire), but none of the standard status codes seems appropriate for that and it isn't the usual way to deal with the problem.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

error is the function to call in case you ajax call failed (like url called not found). It has nothing to do with the custom error verification you want.

In you case, you want to do your verficications (i.e. is there a name submitted?) in your PHP code. and return true (or false) - or actually whatever you want, the point is to define if it is ok or not.

Then, in the success callback function, you display (or not) an error message, depending on the returned value.

However, if your control is as simple as is there a value in this field? you may not want to use an ajax call for that, but a javascript / jquery verification before submit.

pistou
  • 2,799
  • 5
  • 33
  • 60
1

beforeSend: - before ajax request is sent
success: - when request is succeeded and returned something
error: - when ajax request failed (technically)

For timed out error you use error: callback:

$.ajax({
    ...
    timeout: 1000,
    error: function(jqXHR, status, error) {
        if(status==="timeout") {
           //do something on timeout
        } 
    }
});​

For user defined errors (i.e. from PHP) you use success: callback:

$.ajax({
    ...
    success: function (data, status, jqXHR) {
        if (data == something)
           // error
    }
});
Forien
  • 2,712
  • 2
  • 13
  • 30
  • so if there are couple of message that i want to return in my ajax call but they all should be displayed in different div, which are placed on different part of the screen, how to do that? – Shairyar Dec 11 '14 at 11:30
  • `data` can be... any data. Including arrays. – Forien Dec 11 '14 at 12:00
0

As an usual approach, many developers separate frontend errors and backend errors :

as frontend errors there are missing input text, or double click on submit button. This kind of errors are usually managed in the beforeSend: function, 'cause it would be a waste of time to send AJAX requests with missing data. You can stop the request with a simple return false statement as discussed here. A lot of people also use the JQuery validation plugin that works really well.

as backend errors there are values that are not validated by your server-side language (PHP or others), or more technical issues like internal server error or timeout. In this case, you can use the error: function as well explained by @Forien, separating errorStatus values to give users a more readable feedback.

Hope this helps

Community
  • 1
  • 1
theLibertine
  • 175
  • 7