edit-in-place, how to make more db fields editable - ajax

Question

Good evening guys!
I just managed to implant a really sweet working edit-in-place function with jQuery and AJAX. I'm able to edit 1 db field. I would like to be able to edit multiple db fields.
These are all the scripts:
Update query (handler.php)
<?php
include('../../core/additional/connect-db.php');
if (isset($_POST['id']) && isset($_POST['firstname'])) {
$firstname = mysql_real_escape_string($_POST['firstname']);
$id = mysql_real_escape_string($_POST['id']);
$query = "UPDATE players SET firstname ='$firstname' WHERE id='$id'";
$result = mysql_query($query) or die ('Query couldn\'t be executed');
if ($result) {echo 1;}
}
?>
And the ajax in the head
<script type="text/javascript">
$(document).ready(function()
{
$(".editable").hover(
function()
{
$(this).addClass("editHover");
},
function()
{
$(this).removeClass("editHover");
}
);
$(".editable").bind("dblclick", replaceHTML);
$(".btnSave, .btnDiscard").live("click", handler);
UI("Ready");
function UI(state)
{
var status = {};
status.Ready = "Ready";
status.Post = "Saving your data. Please wait...";
status.Success = "Success! Your edits have been saved.";
status.Failure = "Attempts to save data failed. Please retry.";
var background = {};
background.Ready = "#E8F3FF";
background.Post = "#FAD054";
background.Success = "#B6FF6C";
background.Failure = "#FF5353";
$("#status").animate({opacity: 0}, 200, function (){$("#status").html(status[state]).css({background: background[state]}).animate({opacity: 1}, 200)});
}
function handler()
{
var selector="";
var code="21";
if ($(this).hasClass("btnSave"))
{
UI("Post");
var str = $(this).siblings("form").serialize();
$.ajax({
type: "POST",
async: false,
timeout: 100,
url: "core/actions/handler.php",
data: str,
success: function(msg){code = msg; $(".message_edit").show(); $(".message_edit").fadeOut(2500);},
});
if(code == 1)
{
UI("Success");
selector = "editBox";
}
else
{
UI("Failure");
selector = "buffer";
}
}
else {selector = "buffer"}
$(this).parent()
.html($(this).siblings("form")
.children("."+selector)
.val())
.removeClass("noPad editHover")
.bind("dblclick", replaceHTML);
return false;
}
function replaceHTML()
{
var buffer = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("")
.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")
.unbind('dblclick', replaceHTML);
}
}
);
</script>
Then the field is displayed and editable by using this:
<td class="editable" id="' .($id). '" width="180">' .($task). ' </td>
I might be able to copy and rename all scripts, but I'm positive that's not the ideal way to do it. I tried to copy the script in the handler.php file and renamed the db fields, and did the same for the ajax script. But it didn't work. I hope my 'problem' is clear to you, any suggestions?
Note: I think the solution lies somewhere in this line (bottom of the ajax script):
.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")
Thanks in advance for helping out! :)

Answer 1

You may want to look at using the Jeditable jQuery plugin (http://www.appelsiini.net/projects/jeditable) and for a good example of various uses you can look at the demo page:
http://www.appelsiini.net/projects/jeditable/default.html
Also, I hope you are not actually going to use that php script to update the database, as that is vulnerable to SQL injection attacks, so it is bad practice.
And I don't see any element with the class editable in the html, just editBox.
And finally, you are submitting all the elements each time there is to be a change? That is quite inefficient, as one advantage of editing in-place is to just send small changes each time.