AJAX-enabled Edit In Place Plugin With jQuery - jeditable

AJAX-enabled Edit In Place Plugin With jQuery - jeditable
File Size: 67.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jeditable is a customizable edit in place plugin that turns any element into an Ajax-enabled, input- or textarea-based in-place editor for in-place editing of any data within the document.

How to use it:

1. Download & install the jeditable plugin.

# Yarn
$ yarn add jquery-jeditable

# NPM
$ npm install jquery-jeditable --save

2. Include the jeditable plugin 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="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></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>

3. 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");

4. Possible options to customize the plugin.

  • ajaxoptions: jQuery Ajax options. See https://api.jquery.com/jQuery.ajax/
  • before: Function to be executed before going into edit mode
  • callback: Function to run after submitting edited content
  • cancel: Cancel button value, empty means no button
  • cancelcssclass: CSS class to apply to cancel button
  • cols: Number of columns if using textarea
  • cssclass: CSS class to apply to input form; use 'inherit' to copy from parent
  • data: Content loaded in the form
  • event='click': jQuery event such as 'click' of 'dblclick'. See https://api.jquery.com/category/events/
  • formid: Give an id to the form that is produced
  • height='auto': Height of the element in pixels or 'auto' or 'none'
  • id='id': POST parameter name of edited div id
  • indicator: Indicator html to show when saving
  • label: Label for the form
  • loaddata: Extra parameters to pass when fetching content before editing
  • loadtext='Loading…': Text to display while loading external content
  • loadtype='GET': Request type for load url (GET or POST)
  • loadurl: URL to fetch input content before editing
  • maxlength: The maximum number of character in the text field
  • method: Method to use to send edited content (POST or PUT)
  • name='value': POST parameter name of edited content
  • onblur='cancel': Use 'cancel', 'submit', 'ignore' or function. If function returns false, the form is cancelled.
  • onedit: function triggered upon edition; will cancel edition if it returns false
  • onerror: function(settings, original, xhr) { ... } called on error
  • onreset: function(settings, original) { ... } called before reset
  • onsubmit: function(settings, original) { ... } called before submit
  • placeholder='Click to edit': Placeholder text or html to insert when element is empty
  • rows: number of rows if using textarea
  • select: When true text is selected
  • showfn: Function that can animate the element when switching to edit mode
  • size: The size of the text field
  • style: Style to apply to input form; 'inherit' to copy from parent
  • submit: submit button value, empty means no button
  • submitcssclass: CSS class to apply to submit button
  • submitdata: Extra parameters to send when submitting edited content. function(revert, settings, submitdata)
  • tooltip: Tooltip text that appears on hover (via title attribute)
  • type='text': text, textarea or select (or any 3rd party input type)
  • width='auto': The width of the element in pixels or 'auto' or 'none'
$(".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: {}
});

Changelog:

v2.0.7 (2019-03-11)

  • Change isSubmitting back to false onComplete
  • Width/height now correctly taken into account for masked inputs
  • Pass event object to the before callback

v2.0.6 (2018-07-23)

  • Fix cancel when ESC is pressed
  • Fix "main" entry of package.json

2018-06-20

  • v2.0.5: Sorting of select items is now an option (default is not sorted).

2018-05-14

  • v2.0.3: Add ability to apply css to input element

2018-03-29

  • v2.0.2: Fix a bug where selected value will get added to the select options. 

2018-03-28

  • v2.0.1: Fix width setting to number, url and email

2018-03-03

  • add width setting to number, url, email.

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