CODEWITHSUNDEEP
javascriptphpjqueryajax
Jairo
Jairo

Reputation: 39

error callback function is fired even if request is successful

I have a script that uses ajax to send mail. I have tested it by checking the email that will receive the mail and true enough, the ajax request is successful. I also checked the console window of my Firefox browser and it also shows me a successful message. But my problem here is that instead of the done callback function, the error callback function is fired. You may all wonder why I'm still using the error function instead of fail. The reason for this is because when I tried using the fail function, it doesn't trigger the alertbox that I have set inside it. So what I did is go back and use error function again since at least it triggers the alertbox I made.

Here is the script:

<script type="text/javascript">
    var submitButton = $('#submit');              // Variable to cache button element
    var alertBox1 = $('.success');                 // Variable to cache meter element
    var alertBox2 = $('.alert');
    var closeButton1 = $('.close1');                  // Variable to cache close button element
    var closeButton2 = $('.close2');                  // Variable to cache close button element

    $( function(){
        $( '#contactform' ).submit( function(e){
            e.preventDefault();
            console.log( 'hello' );
            var formData = $( this ).serialize();
            console.log( formData );

            $.ajax({
                 type: 'POST',
                 url: 'send.php',
                 data: formData,
                 dataType: 'json',
                 done: function(){

                        $(submitButton).fadeOut(500); // Fades out submit button when it's clicked
                        setTimeout(function() { // Delays the next effect
                             $(alertBox1).fadeIn(500); // Fades in success alert
                        }, 500);
                 },
                 error: function(){
                    $(submitButton).fadeOut(500); // Fades out submit button when it's clicked
                        setTimeout(function() { // Delays the next effect
                             $(alertBox2).fadeIn(500); // Fades in fail alert
                        }, 500);
                 }
            });
        });

        $(closeButton1).click(function() { // Initiates the reset function
            $(alertBox1).fadeOut(500); // Fades out success message
            setTimeout(function() { // Delays the next effect
                $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
                $(submitButton).fadeIn(500); // Fades back in the submit button
            }, 500);

                return false; // This stops the success alert from being removed as we just want to hide it
        });

        $(closeButton2).click(function() { // Initiates the reset function
            $(alertBox2).fadeOut(500); // Fades out success message
            setTimeout(function() { // Delays the next effect
                $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
                $(submitButton).fadeIn(500); // Fades back in the submit button
            }, 500);

                return false; // This stops the fail alert from being removed as we just want to hide it
        });
    });
</script>

What seems to be the one causing this? Just to reiterate, I've tried using fail instead of error callback function since that is one of the answers I found in the Internet and also because I know for a fact that the error function is already deprecated. But because of the reason I mentioned above, I've no choice but to use it.

Upvotes: 2

Views: 216

Answers (1)

Ritikesh
Ritikesh

Reputation: 1228

if you refer the documentation, you cannot use done inside the ajax function as a callback. Either use success or add done at the end of ajax call. 

$.ajax({
   // url, data etc
success: function() {
    //success handler
},
error:function(){
   //Error handler
}
});

     (OR)
$.ajax({
      // ajax related codes
}).done(function(){
     //callback
});

Also if you aren't really returning JSON from the server, remove the dataType: 'json', from the ajax call.

Upvotes: 3

Related Questions