CODEWITHSUNDEEP
javascriptajaxjquery
maxlk
maxlk

Reputation: 1057

ajaxSubmit calls the success callback even when there is an error

I'm using jquery.form.js and ajax to submit my forms. The problem I have is even when it's not on success (when there is an error) also the ajax is resetting the form no matter it is in code only to do it on after success.

Here is the code:

<script>
$(document).ready(function()
{
    $('#FileUploader').on('submit', function(e)
    {
        e.preventDefault();
        $('#submit').attr('disabled', ''); // disable upload button
        //show uploading message
        $("#loadding").html('<div class="loader"><img src="images/ajax-loader.gif" alt="Please Wait"/> <br/><span>Submiting...</span></div>');
        $(this).ajaxSubmit({
            target: '#output',
            success:  afterSuccess //call function after success
        });
    });
});

function afterSuccess()
{
    $('#FileUploader').resetForm();  // reset form
    $('#submit').removeAttr('disabled'); //enable submit button
    $('#loadding').html('');
}
</script>

Can someone point out where is the problem. Thanks in advance.

Upvotes: 1

Views: 11861

Answers (3)

Anshu Dahiya
Anshu Dahiya

Reputation: 69

$(this).ajaxSubmit({
            target: '#output',
            success:  afterSuccess,
            error:error
        });

function error(response,status,xhr){
alert("error");}

will work as i had implemented same concept in my project and it works fine.

Upvotes: 4

palmplam
palmplam

Reputation: 717

Did you change the http status code of the server response if an error occuring ?
For jQuery, success = 2xx http status code return in the response and error = 4xx
If you didn't change the header of response, for your jQuery code, it's always a success!!!


So 2 solutions :

  1. You can change the http header code status if it's an error.
  2. You can return a different content in response and check it in your success function.

Other point: change the definition of the success property like behind.

success:  function () { afterSuccess(); } //call function after success

Why ? Because, if you declare directly the function, it will be execute during the ajaxSubmit() configuration, maybe it's solve your problem, because before the response of the server, afterSuccess() will be called.

Upvotes: 1

MrCode
MrCode

Reputation: 64526

The success event will always fire if the HTTP response code is in the 200-299 range (or === 304), anything else and it won't fire. So I'm guessing that your server side code responds with 200 OK even when there is a problem.

If the server outputs a value such as true you can test the response text for that:

    $(this).ajaxSubmit({
        target: '#output',
        success:  function(response) {
            if(response == "true") {
                afterSuccess();
            }
        }
    });

Upvotes: -2

Related Questions