JQuery form submit not calling success

Question

After click on submit beforeSend: works but it does not call success: also there is no console error . The data also submit to database correctly ! Then why it not call the success: . Please Help

$(function() {
    //hang on event of form with id=ticketForm
    $("#ticketForm").submit(function(e) {
        //prevent Default functionality
        e.preventDefault();
        //get the action-url of the form
        var actionurl = e.currentTarget.action;
        var form = $('#ticketForm');
        var submit = $('#submite');

        $.ajax({
            url: actionurl,
            type: "POST",
            data: $("#ticketForm").serialize(),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            beforeSend: function(e) {
                submit.html("Booking....");
            },
            success: function(e) {
                submit.html("Booking Completed !");
                //get the message from booking.php and show it.
                $(".alert").removeClass("hide");
                var msg = $.ajax({
                    type: "GET",
                    url: actionurl,
                    async: false
                }).responseText;
                document.getElementById("success-message").innerHTML = msg;
                setTimeout(function() { // wait for 3 secs(2)
                    location.reload(); // then reload the page.(3)
                }, 3000);
            },
            error: function(e) {
                console.log(e)
            }
        });
    });
});

Console Message

Object {readyState: 4, responseText: "<strong>Seat Booked Successfully</strong>", status: 200, statusText: "OK"}

Answer 1

In a Ajax call 'dataType' attributes means what data format can be expect from client(browser). As per error message server is returning 'string' instead 'json'.

But on the other hand, given ajax call is expecting json data to be returned by backend server. Either provide a valid JSON in response or change datatype to html.

Answer 2

In your AJAX call settings you set dataType to json , but in return you provide a string.

dataType (default: Intelligent Guess (xml, json, script, or html)) The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response

So, you have two solutions:

1. Provide a valid JSON in response
2. Do not ask for JSON by changing your dataType value (to html ), or by removing it.

Answer 3

I had similar problem. As you are redirecting page in success you need to use e.preventDefault(); // to prevent page refresh

after the ajax call or

return false; // to prevent page refresh

Something like this :

$(function() {
//hang on event of form with id=ticketForm
$("#ticketForm").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
var form = $('#ticketForm');
var submit = $('#submite');     


$.ajax({
        url: actionurl,
        type: "POST",
        data: $("#ticketForm").serialize(),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        cache: false,
        beforeSend: function(e) {
          submit.html("Booking....");
        },
        success: function(e) {
            submit.html("Booking Completed !");
            //get the message from booking.php and show it.
            $( ".alert" ).removeClass( "hide" );
            var msg = $.ajax({type: "GET", url: actionurl, async: false}).responseText; 
            document.getElementById("success-message").innerHTML = msg;
            setTimeout(function(){// wait for 3 secs(2)
            location.reload(); // then reload the page.(3)
            }, 3000); 
        },

        error: function(e) {
            console.log(e)
        }
});
return false;     e.preventDefault();  //any one of this options to prevent page refresh after ajax call
});
});