Introduction:

This plugin makes it simple to edit text.

Try out a demonstration

Setup:

Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)

<link href="jquery.quickedit.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.quickedit.js"></script>

Javascript

$(document).ready(function () {
  $('.quickedit').quickEdit();
});

Use TextArea.

$(document).ready(function () {
  $('.quickedit').quickEdit({
    textarea: true
  });
});

HTML

<div id="id_text">This is a jQuery Quick Edit Demo.</div>
<a href="/quickedit.php" rel="id_text" class="quickedit">edit text above</a>

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 the 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

<?php
  header('Content-Type: text/javascript; charset=utf-8');

  $value = $_POST['value'];
  $body = trim($value);

  echo json_encode(array(
    'status' => 'success',
    'body'   => $body
  ));

Options

Events

Release Notes

2009-07-20 - 0.1.0