How to make use of it:

1. Insert the jQuery SimpleEdit plugin’s information into the doc.

<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 component that must be editable.

<a href="#" 
   id="url" 
   data-name="url" 
   data-pk="1" 
   data-url="/post">  
</a>

$(function(){
  $('#url').simpleedit()
});

3. You can set the choices within the JavaScript as follows:

$('#url').simpleedit({
  name: 'url'
  pk: 1,
  url: '/post',
})

4. Get the edited content:

$('#url').simpleedit(function (changedText) {
  console.log(changedText)
})

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

$('#url').simpleedit(
  '/path/to/server/', 
  function(){
    // callback 1
  }, 
  'cancel', 
  function(){
    // callback 2
  }
)

6. Success & error handlers:

$('#url').simpleedit(
  success: function(response) {
    console.log(response.msg)
  }  
  error: function(response) {
    console.log(response.msg)
  }
)

7. All default configs.

$.fn.simpleedit.defaults = {
  availableOptions: {
    mode: ['inline'],
    onblur: ['cancel', 'submit', 'ignore'],
    type: [
      'text',
    ],
  },
  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',
}

[AJAX] Upload HTML 5 Library for Uploading Files | FileUp

Simple AJAX-enabled Inline Editing Plugin, jQuery SimpleEdit Github, jquery in place editor, javascript in place editing

See Demo And Download