jQuery AJAX POST to PHP file to UPDATE database not updating - php

Question

I'm trying to build a small CMS system, I want to use AJAX and jQuery to do so.
If I do not use AJAX the code works, I have no idea why the data is not being passed properly. AJAX success returns "Success"
Any help is appreciated.
Here is my Javascript:
$(document).ready(function(){
var aboutContent = $('#aboutContent').attr('value');
$('#aboutUpdate').submit(function() {
$.ajax({
type: "POST",
url: "scripts/update.php",
data: "aboutUpdate="+aboutContent,
beforeSend: function(){ $('#aboutStatus').fadeIn(250).css('color', '#017c04').html('processing...'); },
success: function(){ $('#aboutStatus').fadeIn(250).css('color', '#017c04').html('Saved Successfully!').delay(500).fadeOut(250); },
error: function(){ $('#aboutStatus').fadeIn(250).css('color', '#ff464a').html('An error occurred!').delay(500).fadeOut(250); }
});
return false;
});
});
Here is my HTML:
<?
$query = "SELECT * FROM pageContent WHERE page = 'about'";
$result = mysql_query($query);
while($rows = mysql_fetch_array($result)){
?>
<div class="pageContent">
<h2>About</h2>
<form id="aboutUpdate" method="post">
<textarea class="editor" id="aboutContent" cols="50" rows="20"><? echo $rows['content']; ?></textarea>
<input type="submit" value="Save Now"><span class="updateStatus" id="aboutStatus"></span>
</form>
</div>
<?
}
?>
Here is the PHP (scripts/update.php):
$aboutContent = mysql_real_escape_string($_POST['aboutUpdate']);
if(isset($_POST['aboutUpdate'])){
$query="UPDATE pageContent SET content='$aboutContent' WHERE page='about'";
$result=mysql_query($query)or die(mysql_error());
if($result){
echo "Success";
}
else{
echo "Update Error";
}
}
else{
header("location:http://google.com");
}

Answer 1

Fixed the issue. Here is how:
First on the TEXTAREA I need to specify the attribute
name="aboutUpdate"
so the PHP isset can pull the data.
Second, I noticed a variable was 'undefined' when submitting.
var aboutContent = $('#aboutContent').attr('value');
Here is the working Javascript:
$('#aboutUpdate').submit(function() {
$.ajax({
type: "POST",
url: "scripts/update.php",
data: { aboutUpdate: $('#aboutContent').attr('value') },
beforeSend: function(){
$('#aboutStatus').fadeIn(250).css('color', '#017c04').html('processing...');
},
success: function(){
$('#aboutStatus').fadeIn(250).css('color', '#017c04').html('Saved Successfully!').delay(2500).fadeOut(250);
},
error: function(){
$('#aboutStatus').fadeIn(250).css('color', '#ff464a').html('An error occurred!').delay(2500).fadeOut(250);
}
});
return false;
});
HTML:
<?
$query = "SELECT * FROM pageContent WHERE page = 'about'";
$result = mysql_query($query);
while($rows = mysql_fetch_array($result)){
?>
<div class="pageContent">
<h2>About</h2>
<form id="aboutUpdate" method="post">
<textarea class="editor" id="aboutContent" name="aboutUpdate" cols="50" rows="20"><? echo $rows['content']; ?></textarea>
<input type="submit" value="Save Now"><span class="updateStatus" id="aboutStatus"></span>
</form>
</div>
<?
}
?>
PHP update.php:
$aboutContent = mysql_real_escape_string($_POST['aboutUpdate']);
if(isset($_POST['aboutUpdate'])){
$query="UPDATE pageContent SET content='".$aboutContent."' WHERE page='about'";
$result=mysql_query($query)or die(mysql_error());
if($result){
echo "Success";
}
else{
echo "Update Error";
}
}

Answer 2

Try your Ajax function like this:
$.ajax({
type: "POST",
url: "scripts/update.php",
data: { aboutUpdate: aboutContent },
beforeSend: function(){ $('#aboutStatus').fadeIn(250).css('color', '#017c04').html('processing...'); },
success: function(){ $('#aboutStatus').fadeIn(250).css('color', '#017c04').html('Saved Successfully!').delay(500).fadeOut(250); },
error: function(){ $('#aboutStatus').fadeIn(250).css('color', '#ff464a').html('An error occurred!').delay(500).fadeOut(250); }
});
Notice the change in the POST data line.

Answer 3

Absolutely sure, that with this data: "aboutUpdate="+aboutContent you are sending something totaly wrong.
It should be data: {aboutUpdate: aboutContent}
Plus I'm not sure, that textarea actually has attribute value. Try
$('#aboutContent').val()
or
$('#aboutContent').text()