It is an alternative to x-editable. Written in pure JavaScript.
Heres a quick demo on jfiddle to give you some examole of how it works.
Required
- Bootstrap 5
- Popper
- Moment.js
-
Include it on your page.
<link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.bundle.min.js"></script> <script src="moment.js"></script>
-
Download corresponding dark-editable build and include it on your page:
<link rel="stylesheet" href="dark-editable.css"> <script src="dark-editable.js"></script>
-
Markup elements that should be editable. Usually it is
<A>
element with additionaldata-*
attributes<a id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
Main attributes you should define are:
type
- type of input (text, textarea, select, etc)url
- url to server-side script to process submitted value (/post, post.php etc)pk
- primary key of record to be updated (ID in db)id
orname
- name of field to be updated (column in db). Taken fromid
ordata-name
attributevalue
- initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents
-
Enable popovers via JavaScript:
const usernameEl = document.getElementById('username'); const popover = new DarkEditable(usernameEl);
Alternatively, you can set all options via javascript
<a id="username">superuser</a>
const usernameEl = document.getElementById('username'); const popover = new DarkEditable(usernameEl, { type: 'text', pk: 1, url: '/post', title: 'Enter username' });
-
Frontend ready!
Open your page and click on element. Enter new value and submit form. It will send ajax request with new value to/post
.
Request contains name, value and pk of record to be updated:POST /post { name: 'username', //name of field (column in db) pk: 1 //primary key (record id) value: 'superuser!' //new value }
-
Write backend part:
X-editable has no limitation to server-side part: you can write it on any language you prefer.
For example, you want to validate submitted value on server:- If value is valid, you should return HTTP status 200 OK. Element on page will be updated automatically. No response body required.
- If value is not valid, you should return HTTP status != 200 (e.g. 400 Bad request) with error message in response body. Element on page will not be updated and editable form will display error message.
JSON response:
If your server returns JSON, you can always send HTTP status 200 with error flag in response body.
To process it use success handler://assume server response: 200 Ok {status: 'error', msg: 'field cannot be empty!'} const usernameEl = document.getElementById('username'); const popover = new DarkEditable(usernameEl, { ... success: function(response, newValue) { if(response.status == 'error') return response.msg; //msg will be shown in editable form } });
Work LOCALLY:
If you don't want to send value on server, just keep empty url option. You can process value in success handler:const usernameEl = document.getElementById('username'); const popover = new DarkEditable(usernameEl, { type: 'text', title: 'Enter username', });
Options can be defined via javascript or via data-* html attributes.\
Name | Type | Default | Description |
---|---|---|---|
ajaxOptions | object | null | Text shown when element is empty |
disabled | boolean | false | Sets disabled state of editable |
emptytext | string | 'Empty' | Text shown when element is empty. |
error | function | null | |
success | function | null | |
name | string | null | Name of field. Will be submitted on server. Can be taken from id attribute |
pk | string | null | Primary key of editable object (e.g. record id in database). |
send | boolean | true | Strategy for sending data on server. When true data will be sent on server only if pk and url defined, otherwise new value will be stored locally. |
type | string | 'text' | Type of input. Can be text/textarea/select/date and more |
url | string | null | Url for submit, e.g. '/post' |
value | mixed | element's text | Initial value of input. If not set, taken from element's text. |
Method | Parameters | Description |
---|---|---|
disable() | none | Disables editable |
enable() | none | Enables editable |
getValue() | none | Returns current values of editable elements |
setValue(value) | - value Mixed new value | Sets new value of editable |
document.getElementById("username").addEventListener("save", function(e){
alert('Saved value');
})
Event | Callback parameters | Description |
---|---|---|
show | - event Object event object | Fired when container is show and form is rendered. |
shown | - event Object event object | Fired when container is shown and form is rendered. |
hide | - event Object event object | Fired when container was hide. It occurs on both save or cancel. |
hidden | - event Object event object | Fired when container was hidden. It occurs on both save or cancel. |
init | - event Object event object | Fired when element was initialized. Please note that you should setup init handler before applying editable. |
save | - event Object event object | Fired when new value was submitted. |
There are several input types supported by library. Each type may have additional configuration options.
Currently supported:
- text
- textarea
- select
- date
- datetime
- html5types
Text input
Name | Type | Default | Description |
---|---|---|---|
placeholder | string | null | Placeholder attribute of input. Shown when input is empty. |
Textarea input
Name | Type | Default | Description |
---|---|---|---|
placeholder | string | null | Placeholder attribute of input. Shown when input is empty. |
Select (dropdown)
Name | Type | Default | Description |
---|---|---|---|
source | array | [] | Source data for list. If array - it should be in format: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...] |
Textarea input
Name | Type | Default | Description |
---|---|---|---|
format | string | YYYY-MM-DD | Format used for sending value to server. Also applied when converting date from data-value attribute. Use moment.js |
viewformat | string | YYYY-MM-DD | Format used for displaying date. Also applied when converting date from element's text on init. Use moment.js |
Textarea input
Name | Type | Default | Description |
---|---|---|---|
format | string | YYYY-MM-DD | Format used for sending value to server. Also applied when converting date from data-value attribute. Use moment.js |
viewformat | string | YYYY-MM-DD | Format used for displaying date. Also applied when converting date from element's text on init. Use moment.js |
HTML5 input types. Following types are supported:
- password
- url
- tel
- number
- range
- time
Name | Type | Default | Description |
---|---|---|---|
placeholder | string | null | Placeholder attribute of input. Shown when input is empty. |