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
– bipen, Commented Jun 26, 2013 at 6: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
– Felix Kling, Commented Jun 26, 2013 at 6:41
Ok, so assuming that you are actually sending {"error": true}, add dataType: 'json' to the Ajax call options. — Felix Kling
– Felix Kling, Commented Jun 26, 2013 at 6:44
please look into the question again, I added server side code — Surya Kasturi
– Surya Kasturi, Commented Jun 26, 2013 at 6:47

Tejas Savaliya · Accepted Answer · 2013-06-26 12:19:14Z

8

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;
        });
    });

answered Jun 26, 2013 at 12:19

Tejas Savaliya

6389 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bill Keller Over a year ago

Is responseText always defined?

Olrac · Accepted Answer · 2013-06-26 06:57:04Z

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, 2013 at 6:57

Olrac

1,5372 gold badges10 silver badges22 bronze badges

2 Comments

Cyril Duchon-Doris Over a year ago

What do you put inside $.ajax({ } ?

colm.anseo Over a year ago

@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()

Premshankar Tiwari · Accepted Answer · 2013-07-01 06:10:37Z

1

you have to use

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

full documentation

answered Jul 1, 2013 at 6:10

Premshankar Tiwari

3,1163 gold badges28 silver badges32 bronze badges

Comments

Paritosh · Accepted Answer · 2013-06-26 06:41:21Z

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, 2013 at 6:41

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

2 Comments

Surya Kasturi Over a year ago

Hey, if I put the mimetype or content_type in server its not working

Paritosh Over a year ago

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.

Collectives™ on Stack Overflow

How to add error handling in Jquery Ajax Form submission

4 Answers 4

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related