I am trying to update a mysql db from a textarea with jquery and ajax but cannot get the updated content of the text area to pass through to the php page.
I have a page and on the page I click a button which opens a layer and calls the edit_box function.
the layer then fills the form fields with data from the db.
the textarea is a nicedit box and all works well until I click save and any changes I have made to the textarea are not passed. Only the original content.
its seems so obvious but I cant seem to fathom the issue
any help appreciated
heres the code
html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#popupbox{
padding:0;
width: 99%;
height: auto;
margin: 0px auto;
position:absolute;
background: #FBFBF0;
border: solid #000000 2px;
z-index: 9000;
font-family: arial;
visibility: hidden;
}
</style>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script>
function get_edit_content(box_id,page_ref,template_ref)
{
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
.done(function(data) {
document.getElementById("box_id").value = box_id;
document.getElementById("edit_content").value=data;
var area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});
});
}
function edit_box(showhide,box_id,page_ref,template_ref){
if(showhide == "show"){
get_edit_content(box_id,page_ref,template_ref);
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
$(document).ready(function()
{
$('#sub').click(function (e)
{
e.preventDefault();
$.ajax({type:'POST', url: 'update_textarea.php', data:$('#myFrm').serialize(), success:
function(response)
{
alert(response);
}
});
});
});
</script>
</head>
<body>
<div id="popupbox">
<form id="myFrm">
<input type="hidden" name="page_ref" value="<? echo $page_ref; ?>" />
<input type="hidden" name="template_ref" value="<? echo $template_ref; ?>" />
<input type="hidden" id="box_id" name="box_id"/>
<textarea name="edit_content" id="edit_content" style="width: 500px; height:500px;"></textarea>
<button id="sub" >Save</button>
<center><a href="javascript:edit_box('hide');">close</a></center>
</form>
</div>
</body>
</html>
php page
<?
include("connect.php");
$page_ref = $_POST['page_ref'];
$template_ref = $_POST['template_ref'];
$box_id = $_POST['box_id'];
$edit_content = addslashes($_POST['edit_content']);
if(mysql_query("UPDATE site_content SET content='$edit_content' WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'"))
{
echo "page_ref=".$page_ref." template_ref=".$template_ref." box_id=".$box_id." edit_content=".$edit_content;
}
else
{
echo "error";
}
?>
