I am having trouble getting my jQuery ajax to work properly. It directs to the PHP page to update the database, but never returns back to the script for the success or error options.
My code is below:
$(document).ready(function(){
$("form#updatejob").submit(function() {
function textreplace(x) {return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");}
// we want to store the values from the form input box, then send via ajax below
var job = $("#job").attr("value");
var description = $("#description").val();
description.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
var startDate = $("#startDate").attr("value");
var releaseDate = $("#releaseDate").attr("value");
var status = $("#status").attr("value");
$.ajax({
beforeSend:textreplace(description),
type: "POST",
url: "updatedjob.php",
data: "jobID="+ job +"& description="+ description +"& startDate="+ startDate +"& releaseDate="+ releaseDate +"& status="+ status,
success: function(){
$("form#updatejob").hide(function(){$("div.success").fadeIn();});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
return false;
});
});
And the PHP:
<?php
include("connect.php");
$job = trim($_POST['job']);
$startDate = trim($_POST['startDate']);
$releaseDate = trim($_POST['releaseDate']);
$mysqlstartdate = date('Y-m-d', strtotime($startDate));
$mysqlreleasedate = date('Y-m-d', strtotime($releaseDate));
$description = trim($_POST['description']);
$status = trim($_POST['status']);
$update = "UPDATE jobs SET startDate = '$mysqlstartdate', releaseDate = '$mysqlreleasedate', description = '$description', status = '$status' WHERE jobID = '$job' ";
$rsUpdate = mysql_query($update);
// or die(mysql_error()); mysql_close();
?>
Try this:
$.ajax({
beforeSend: function() { textreplace(description); },
type: "POST",
url: "updatedjob.php",
data: "jobID="+ job +"& description="+ description +"& startDate="+ startDate +"& releaseDate="+ releaseDate +"& status="+ status,
success: function(){
$("form#updatejob").hide(function(){$("div.success").fadeIn();});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
The beforeSend property is set to function() { textreplace(description); } instead of textreplace(description). The beforeSend property needs a function.
One also may use the following to catch the errors:
$.ajax({
url: url,
success: function (data) {
// Handle success here
$('#editor-content-container').html(data);
$('#editor-container').modal('show');
},
cache: false
}).fail(function (jqXHR, textStatus, error) {
// Handle error here
$('#editor-content-container').html(jqXHR.responseText);
$('#editor-container').modal('show');
});
I was having the same issue and fixed it by simply adding a dataType = "text" line to my ajax call. Make the dataType match the response you expect to get back from the server (your "insert successful" or "something went wrong" error message).
You can implement error-specific logic as follows:
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus == 'Unauthorized') {
alert('custom message. Error: ' + errorThrown);
} else {
alert('custom message. Error: ' + errorThrown);
}
}
This may be an old post but I realized there is nothing to be returned from the php and your success function does not have input like as follows, success:function(e){}. I hope that helps you.
$.ajax({
type:'POST',
url: 'ajaxRequest.php',
data:{
userEmail : userEmail
},
success:function(data){
if(data == "error"){
$('#ShowError').show().text("Email dosen't Match ");
$('#ShowSuccess').hide();
}
else{
$('#ShowSuccess').show().text(data);
}
}
});
This may not solve all of your problems, but the variable you are using inside your function (text) is not the same as the parameter you are passing in (x).
Changing:
function textreplace(x) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
To:
function textreplace(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
seems like it would do some good.
You are sending a post type with data implemented for a get. your form must be the following:
$.ajax({
url: url,
method: "POST",
data: {data1:"data1",data2:"data2"},
...
Source: Stackoverflow.com