Ajax Editable Inline Edit with jQuery Plugin – jeditable.js

jQuery-jeditable is listed under edit in place plugin for jQuery. It functions in such a way, if a user clicks on the element box and save accordingly then the element will become a final part of the information that needs to be sent to the backend server instantly. No need to synchronize the entire page after filling all informative elements. This plugin saves lots of time of the users significantly when they are going to synchronize the information.

How to use it:

1. Include the jeditable plugin Scripts and its plugins on the webpage :

jquery.jeditable.autogrow.js: input auto grow plugin
jquery.jeditable.charcounter.js: character counter plugin
jquery.jeditable.checkbox.js: checkbox plugin
jquery.jeditable.datepicker.js: date picker plugin
jquery.jeditable.masked.js: input mask plugin
jquery.jeditable.time.js: time plugin

<!-- jQuery -->
<script src="jquery-3.3.1.min.js"></script>

<!-- jQuery jeditable -->
<script src="jquery.jeditable.js"></script>

<!-- jeditable plugins -->
<script src="jquery.jeditable.autogrow.js"></script>
<script src="jquery.jeditable.charcounter.js"></script>
<script src="jquery.jeditable.checkbox.js"></script>
<script src="jquery.jeditable.datepicker.js"></script>
<script src="jquery.jeditable.masked.js"></script>
<script src="jquery.jeditable.time.js"></script>

2. Call the function on the target element and specify the URL or Function to send edited content to :

<p class="example">Click To Edit.</p>
$(".example").editable("save.php");

3. other all functions:

$(".example").editable("save.php",{
  name       : 'value',
  id         : 'id',
  type       : 'text',
  width      : 'auto',
  height     : 'auto',
  event      : 'click',
  onblur     : 'cancel',
  tooltip    : 'Click to edit',
  loadtype   : 'GET',
  loadtext   : 'Loading...',
  placeholder: 'Click to edit',
  loaddata   : {},
  submitdata : {},
  ajaxoptions: {}
});