Help with Edit in Place jquery/mysql/php
So I have been trying to figure out "edit in place" from the tutorial provided here:
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax
I copied the the code and I have the bit where it modifies in place which is cool however I need to be able to save the information modified into a mysql table.
Here is my project. I have a mysql table that I present on a php page. Currently users can modify the fields using a standard post. I wanted to update this by using jquery so they dont have to leave the page or reload it.
Please help me build the save.php
This is from the page that I want to be editable ( taken from the tutorial):
-
| function saveChanges(obj, cancel) { |
|
if(!cancel) { |
|
var t = $(obj).parent().siblings(0).val(); |
|
$.post("save.php",{ |
|
content: t |
|
}); |
|
} |
|
|
|
|
This is the tables/rows that are displayed on the page:
|
|
- <p><img src="toplogo_us_en.gif" width="350" height="80" /> </p>
<p align="center" class="myFont">Follow Up</p>
<div align="center">
<table id="theList" width="806" border="0">
<tr class="myFont">
<td width="8"><div align="center">$key</div></td>
<td width="31"><div align="center">$region</div></td>
<td width="71"><div align="center">$record_num</div></td>
<td width="249"><div align="center"><a target="I1" href="../getDesc.php?key=68368">$Record_title</a></div></td>
<td width="315" ><div id="editInPlace" align="center">$description ( $new_description: This is what I would like to be able to modify with jquery edit in place) </div></td>
<td width="106"> <div align="center"> $nameofaperson
</div></td>
</tr>
|
|
|
|
My goal here is simple I would like to be able to send via post $key, $new_description(after edit in place) to save.php.
As it stands my page can be edited but nothing happens.. I cant get the save.php to do anything.. it seems like jquery is not posting.
ALL the code
- <!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>Handover</title>
<style type="text/css">
.myFont {
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
}
</style>
</head>
<body>
<script type="text/javascript" src="/Applications/MAMP/htdocs/trends/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
setClickable();
});
function setClickable() {
$('div#editInPlace').click(function() {
var textarea = '<div><textarea rows="3" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};
function saveChanges(obj, cancel) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
$.post("save.php",{
content: t
});
}
else {
var t = cancel;
}
if(t=='') t='(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
setClickable();
}
</script>
<style type="text/css">
<!--
a.red:link {color: #ff0000; background: #ffffff; font-style:normal;}
a.red_highlight:link {color: #FFFFFF; background: #FF0000; font-style:normal;}
a.red:active {color: #ff0000; background: #ffffff; font-style:normal;}
a.red:visited {color: #ff0000; background: #ffffff; font-style: normal;}
a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}
-->
tr {
border: 1px solid gray;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#edeff0;
}
.stripe2 {
background-color:#ffffff;
}
.highlight {
background-color: #cceafb;
# font-weight:bold;
}
</style>
<script type="text/javascript">
$(function() {
$("#theList tr:even").addClass("stripe1");
$("#theList tr:odd").addClass("stripe2");
$("#theList tr").hover(
function() {
$(this).toggleClass("highlight");
},
function() {
$(this).toggleClass("highlight");
}
);
});
</script>
<p><img src="toplogo_us_en.gif" width="350" height="80" /> </p>
<p align="center" class="myFont">Follow Up</p>
<div align="center">
<table id="theList" width="806" border="0">
<tr class="myFont">
<td width="8"><div align="center">$key</div></td>
<td width="31"><div align="center">$region</div></td>
<td width="71"><div align="center">$record_num</div></td>
<td width="249"><div align="center"><a target="I1" href="http://gmstst.muc.amadeus.net/trends/getDesc.php?key=68368">$rec_title</a></div></td>
<td width="315" ><div id="editInPlace" align="center">$old_desc/$new_desc </div></td>
<td width="106"> <div align="center"> $name </div></td>
</tr>
<tr class="myFont">
<td width="8"><div align="center">$key</div></td>
<td width="31"><div align="center">$region</div></td>
<td width="71"><div align="center">$record_num</div></td>
<td width="249"><div align="center"><a target="I1" href="../getDesc.php?key=68292">$record_title</a></div></td>
<td width="315"><div id="editInPlace" align="center"> $old_desc/$new_desc </div></td>
<td width="106"> <div align="center">$name</div></td>
</tr>
</table>
</div>
<p> </p>
</body>
</html>
|
|
|
Heres how I started my save.php , I tried to create a file to see if the save,php was even being called.. but the file was never created. The actual edit on the page happens so fast that it seems like there is no post taking place.
Please help :(
- <?php
- require_once('config.php');
// DB connection
mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);
@mysql_select_db(DB_DATABASE) or die("Unable to connect to the database");
# done just to see if save.php is being called
$f = fopen("file.txt", "w");
fwrite($f,"test");
fclose($f);
?>