Ajax Editable Inline Edit with jQuery Plugin – jeditable.js

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

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.

Table of Contents

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

Thanks for make jQuery plugin is developed by NicolasCARPi For more Helpfull for users, please check the demo page or visit the official website.

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.

You Might Also Like