Edit in place improve code
This is an edit in place script anyone can help me to improve it?
If I update two time the same comment i have a problem.
-
$(document).ready(function(){
$(".comment").each(function(i){
setClickable(this);
})
});
function setClickable(obj) {
$("#edit_"+$(obj).attr('id')).click(function() {
var textarea = '<textarea rows="4" cols="60" name="'+$(obj).attr('id')+'">'+$(obj).html()+'</textarea>';
$("#edit_settings_"+$(obj).attr('id')).hide();
$("#save_settings_"+$(obj).attr('id')).show();
var revert = $(obj).html();
$(obj).html(textarea);
$("#save_"+$(obj).attr('id')).click(function(){saveChanges($(obj),$(obj).attr('id'),revert);});
// alert ($(obj).attr('id'));
})
}
function saveChanges(obj, n, revert) {
var val = $('textarea[name="'+n+'"]').val();
if(val=='') val=revert;
//alert (val);
$(obj).html(val);
$("#edit_settings_"+n).show();
$("#save_settings_"+n).hide();
$.post("test.php",{
content: val,
n: n
},function(txt){
alert( txt);
});
}
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<link rel="stylesheet" href="css.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jreplacev.js" type="text/javascript"></script>
</head>
<body>
<div id="123" class="comment">Edit the article body text here...</div>
<div id="edit_settings_123">
<input id="edit_123" name="edit" value="edit" type="button">
</div>
<div id="save_settings_123" style="display: none;">
<input id="save_123" name="save" value="save" type="button">
</div>
<div id="456" class="comment">Edit the article body text here...</div>
<div id="edit_settings_456">
<input id="edit_456" name="edit" value="edit" type="button">
</div>
<div id="save_settings_456" style="display: none;">
<input id="save_456" name="save" value="save" type="button">
</div>
<div id="789" class="comment">Edit the article body text here...</div>
<div id="edit_settings_789">
<input id="edit_789" name="edit" value="edit" type="button">
</div>
<div id="save_settings_789" style="display: none;">
<input id="save_789" name="save" value="save" type="button">
</div>
</body>
</html>