How to add error handling in Jquery Ajax Form submission

Question

This is my code

<script type="text/javascript">
$(document).ready(function() {
    $('#spc-comment-flag-form').submit(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(data) {
                if( data['error'] == false) {
                    var msg = 'We got your flag. Our moderators will now look into it. You may close the window now!';
                    $('#spc-comment-flag-response').html(msg);
                }
                else {
                    $('#spc-comment-flag-response').html(data);
                }   
            },
        });
        return false;
    });
});
</script>

edit

on server side its something like this:

@csrf_protect
@login_required
def flag(request, comment_id, next=None):
    if not request.is_ajax():
        raise Http404
    data = {}
    if request.method == 'POST':
        ...
        data = simplejson.dumps(data)
        return HttpResponse(data, mimetype="application/javascript")
    else:
        raise Http404

I am basically server side guy and seldom have to write JS. I sent "error" : true if there is an error with error message and "error" : false if no error on server!

I don't know why in the above code the conditional logic is not working!! Can anyone help me fix it?

aare you sending the response as JSON from the server ?? or is it just HTML — bipen, Jun 26 '13 at 06:40
What kind of the data are you sending back? JSON (`"error" : true` is not valid JSON)? If so, are you setting proper `Content-Type` response headers? Otherwise jQuery won't know that it is JSON and won't parse it automatically. Then you have to set the `dataType: 'json'` option. — Felix Kling, Jun 26 '13 at 06:41
Ok, so assuming that you are actually sending `{"error": true}`, add `dataType: 'json'` to the Ajax call options. — Felix Kling, Jun 26 '13 at 06:44
please look into the question again, I added server side code — Surya, Jun 26 '13 at 06:47
You are sending, JSON, not JavaScript. See http://stackoverflow.com/q/267546/218196. And as I said, if you set the option, it should already work. — Felix Kling, Jun 26 '13 at 07:11

score 8 · Answer 1 · answered Jun 26 '13 at 12:19

try this one...

$(document).ready(function() {
        $('#spc-comment-flag-form').submit(function() {
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'), 
                success: function(data) {
                    if( data['error'] == false) {
                        var msg = 'We got your flag. Our moderators will now look into it. You may close the window now!';
                        $('#spc-comment-flag-response').html(msg);
                    }
                    else {
                        $('#spc-comment-flag-response').html(data);
                    }   
                },
                error: function (data) {
                       var r = jQuery.parseJSON(data.responseText);
                       alert("Message: " + r.Message);
                       alert("StackTrace: " + r.StackTrace);
                       alert("ExceptionType: " + r.ExceptionType);
                }
            });
            return false;
        });
    });

Is responseText always defined? – Bill Keller Oct 24 '14 at 15:30 — Bill Keller, Oct 24 '14 at 15:30

score 1 · Answer 2 · answered Jun 26 '13 at 06:57

1

You may use this code.. if you want to handle the error in web request ...

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

$.ajax({

}).done(function (data) {

}).fail(function (jqXHR, textStatus) {

});

And about in your server side validation you could return the error using json...

answered Jun 26 '13 at 06:57

Olrac

1,527
2
10
22

What do you put inside `$.ajax({ }` ? – Cyril Duchon-Doris Nov 21 '16 at 10:21
@CyrilDuchon-Doris the data you are sending to the AJAX page. So in the OP's example, this would be data attribute i.e. `$(this).serialize()` – colm.anseo Oct 08 '18 at 18:50

score 1 · Answer 3 · answered Jul 01 '13 at 06:10

1

you have to use

error: function( jqXHR jqXHR, String textStatus, String errorThrown){
   ...
   ...
}

full documentation

answered Jul 01 '13 at 06:10

Premshankar Tiwari

3,006
3
24
30

score 0 · Answer 4 · answered Jun 26 '13 at 06:41

0

  success: function(data)
  {
    if(data.error){
       //alert error
    }
    else{
       //alert('Success');
    }
  },
  error: function(XMLHttpRequest, textStatus, errorThrown)
  {
     alert('Internal server error');
     //some stuff on failure
  }

This error callback also handles the error, which are not caught at the server side.

answered Jun 26 '13 at 06:41

Paritosh

11,144
5
56
74

Hey, if I put the `mimetype` or `content_type` in server its not working – Surya Jun 26 '13 at 06:59
I don't get it. Can you elaborate? What I mean is that if any uncaught exception comes on server side, then `error` callback will be called, not `success`. – Paritosh Jun 26 '13 at 07:08

How to add error handling in Jquery Ajax Form submission

4 Answers4