Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

jQuery Quick Edit


Form plugin for jQuery, provides simple ways 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>

Quick Start

$(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(obj.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
  ));

Downloads



5
Your rating: None Average: 5 (1 vote)