jQuery Quick Edit
jQuery Quick Edit makes it simple to edit text.
Demo
text field
This is a jQuery Quick Edit Demo1.
edit this text.
textarea
This is a jQuery Quick Edit Demo2.
edit text above.
Quick Start
Javascript:
$('#demo1').quickEdit();
HTML:
<span id="demoText1">This is a jQuery Quick Edit Demo1.</span>
<a href="/quickedit.php" id="demo1" rel="demoText1">edit this text.</a>
CSS:
.quickEditOverlay {
position: absolute;
background: url('indicator.gif') center no-repeat;
background-color: #fff;
}
notes: jQuery Quick Edit send a POST request to the url "/quickedit.php" as specified by the anchor tag
$.ajax({
type: 'POST',
url: 'refer to the URL specified by the anchor',
data: {value: "Text data which is sent to server"},
dataType: 'json',
success: function (obj) {
if (obj.status == 'success') {
if (obj.body) {
$t.html(body);
}
}
}
});
You should set up server-side script (i.e. PHP).
PHP (quickedit.php)
<?php
header('Content-Type: text/javascript; charset=utf-8');
$value = $_POST['value'];
$body = trim($value);
echo json_encode(array(
'status' => 'success',
'body' => $body
));