Firefog Firefog - 5 months ago 11
jQuery Question

JQuery form submit not calling success

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

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.