This time I will share jQuery Plugin and tutorial about AJAX-enabled Edit In Place Plugin With jQuery – jeditable, hope it will help you in programming stack.
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.
2 |
$ yarn add jquery-jeditable |
5 |
$ 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
02 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
05 |
< script src = "jquery.jeditable.js" ></ script > |
08 |
< script src = "jquery.jeditable.autogrow.js" ></ script > |
09 |
< script src = "jquery.jeditable.charcounter.js" ></ script > |
10 |
< script src = "jquery.jeditable.checkbox.js" ></ script > |
11 |
< script src = "jquery.jeditable.datepicker.js" ></ script > |
12 |
< script src = "jquery.jeditable.masked.js" ></ script > |
13 |
< 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.
1 |
< p class = "example" >Click To Edit.</ p > |
1 |
$( ".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’
01 |
$( ".example" ).editable( "save.php" ,{ |
09 |
tooltip : 'Click to edit' , |
11 |
loadtext : 'Loading...' , |
12 |
placeholder: 'Click to edit' , |
Changelog:
v2.0.18 (2020-12-21)
v2.0.17 (2020-05-02)
v2.0.15 (2020-02-20)
- Replace deprecated .blur().
v2.0.13 (2019-08-28)
- Accept list of tuples as items for select element
- Wrap the plugins in functions for non-conflict mode
v2.0.11 (2019-08-04)
- Bugfix: Use text() instead of html() for revert
v2.0.10 (2019-06-06)
- Allow resubmiting if onsubmit or submit returns false
- Update dependencies to fix security vulnerabilities
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.