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>Untitled Document</title>
<style type="text/css">
.editable {
background-color: #FF9;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setClickable();
});
function setClickable() {
$(".editInPlace").on("click", function () {
var tarea = "<div class='holder'><textarea rows='10' cols='60'>" + $(this).html() +
"</textarea>";
var btns = "<div><input type='button' value='save' class='saveButton' /> " +
"OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
var revert = $(this).html();
$(this).replaceWith(tarea + btns);
$(".saveButton").on("click", function () {
saveChanges(this, false);
});
$(".cancelButton").on("click", function () {
saveChanges(this, revert);
});
}).on("mouseover", function () {
$(this).addClass("editable");
}).on("mouseout", function () {
$(this).removeClass("editable");
});
}
function saveChanges(obj, cancel) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
$.post("test2.php", {content: t}, function(txt) {
alert(txt);
});
} else {
var t = cancel;
}
//$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
$(obj).closest('.holder').replaceWith('<div class="editInPlace">' + t + '</div>');
setClickable();
}
</script>
</head>
<body>
<!--<?php
include('db.php');
$query = "SELECT * FROM videos ORDER By vid DESC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
}
?>-->
<div class="editInPlace">Some text here</div>
<div class="editInPlace">Some text here 2nd</div>
<div class="editInPlace">Some text here 3rd</div>
</body>
</html>