Simple AJAX-enabled Inline Editing Plugin For jQuery

File Size: 17.3 KB
Views Total: 1351
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple AJAX-enabled Inline Editing Plugin For jQuery

An easy-to-use inline editing (also called in-place editing) jQuery plugin that sends edited data as a JS object to the server via AJAX requests ("POST", "GET", or "PUT").

How to use it:

1. Insert the jQuery SimpleEdit plugin's files into the document.

<link rel="stylesheet" href="/path/to/css/jquery-simpleedit.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery-simpleedit.js"></script>

2. Call the plugin on the element that should be editable. Available HTML data attributes:

  • data-name: Field name
  • data-pk: Primary key
  • data-url: Path to the server-side script that processes the submitted value
<a href="#" 

4. You can set the options in the JavaScript as follows:

  name: 'url'
  pk: 1,
  url: '/post',

5. Get the edited content:

$('#url').simpleedit(function (changedText) {

6. Pass the parameters to the simpleedit() as follows:

    // callback 1
    // callback 2

7. Success & error handlers:

  success: function(response) {
  error: function(response) {

8. All default configs.

$.fn.simpleedit.defaults = {
  availableOptions: {
    mode: ['inline'],
    onblur: ['cancel', 'submit', 'ignore'],
    type: [
  ajaxOptions: {
    type: 'POST',
  buttons: {
    submit: `<button class="submit"><span>&#10004;</span></button>`,
    abort: `<button class="abort"><span>&#10006;</span></button>`,
    spinner: `<button class="loader"><span class="simpleedit-spinner">&#11211;</span></button>`,
  callbacks: [],
  error: null,
  mode: 'inline',
  onblur: 'cancel',
  success: null,
  type: 'text',
$.fn.simpleedit.defaults.ajaxOptions = { 
  type: 'PUT',

This awesome jQuery plugin is developed by WalterWoshid. For more Advanced Usages, please check the demo page or visit the official website.