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
  ));