Ajax Editable Inline Edit with jQuery Plugin – jeditable.js

Text
Demo    Download
Ajax Editable Inline Input Edit with jQuery Plugin - jeditable
File Size: 0.8 KB
Views Total: 604 views
Last Update:March 15, 2020
Publish Date: March 10, 2020
Official Website: Go to website
License: MIT

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: {}
});


Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins