Modern In-Place Editing Library w/wo/ jQuery - XEditable Lite

XEditable Lite is a lightweight JavaScript library that adds modern inline and popup editing to your web application.

It's a full, drop-in replacement for the classic Bootstrap x-editable library and works with or without Bootstrap & jQuery. The library keeps the same API, so you can modernize your projects without rewriting existing code.

Features:

• Dual editing modes: Supports popup editing with viewport-aware positioning and inline editing with compact icon controls.
• Searchable select fields: Dropdown options filter as you type, with results ranked by starts-with matches.
• Date formatting control: Displays dates using custom formats via data-format while submitting ISO format to the server.
• AJAX integration: Remote data sources, spinner indicators during submission, and automatic button disabling while processing.

Use Cases:

• Admin Interfaces: Quick field editing in data tables and user management systems.
• Content Management Systems: Inline editing for content blocks and user profiles.
• Data-Intensive Applications: Allow rapid field updates in dashboards and reporting tools.

Table of Contents:

• Options
• API Methods
• Events

How To Use It:

1. Download the library and add the xeditable.js script to the page. If jQuery is present on the page, the .editable() plugin attaches itself automatically. If not, you can use the vanilla JavaScript API.

<!-- jQuery is OPTIONAL -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- XEditable Lite -->
<script src="/path/to/xeditable.js"></script>

2. The library works by scanning for elements with specific data-* attributes.

<span class="editable"
  data-type="text"
  data-name="username"
  data-title="Enter Username">
  jQueryScript
</span>

3. The library supports standard HTML input types through the data-type attribute:

<!-- Text inputs -->
<span data-type="text">Edit me</span>
<span data-type="textarea">Multi-line text</span>
<span data-type="email">[email protected]</span>
<span data-type="number">42</span>

<!-- Date pickers -->
<span data-type="date" 
      data-format="DD/MM/YYYY">2025-11-10</span>

<!-- Dropdowns -->
<a data-type="select" 
   data-title="Choose">Option</a>

<!-- Checkboxes -->
<span data-type="checkbox">true</span>

4. Initialize the editable elements in your script. You must provide a url to tell the library where to send the updated data.

// With jQuery
$('.editable').editable({
  url: '/api/save'
});

// With Vanilla JS
XEditable.initAll('.editable', {
  url: '/api/save'
});

5. If you prefer an editor that appears directly on the page instead of a popup, set the mode to inline.

<span class="editable"
  data-mode="inline"
  data-type="textarea"
  data-name="bio"
  data-title="Bio">
  Inline bio text
</span>

6. Format dates for display while ensuring a standard format is sent to your server. This example will display the date as 01/01/1990 to the user, but the value submitted via AJAX will be 1990-01-01.

<span class="editable"
  data-type="date"
  data-format="DD/MM/YYYY"
  data-name="dob">
  1990-01-01
</span>

7. One of the best features is the searchable select. You can provide the options locally or fetch them from a remote URL.

<a href="#" id="gender"
   data-type="select"
   data-name="gender"
   data-title="Gender">
   Female
</a>
<script>
  $('#gender').editable({
    url: '/api/save',
    source: [
      { value: 1, text: 'Male' },
      { value: 2, text: 'Female' },
      { value: 3, text: 'Transgender' }
    ]
  });
</script>

<!-- The endpoint must return an array in the format `[{value:'IN', text:'India'}, ...]`. -->
<!-- The library caches this data to map values back to display text after submission. -->
<a href="#" id="country"
   data-type="select"
   data-title="Select Country">
</a>
<script>
  $('#country').editable({
    url: '/api/save',
    source: '/api/countries'
  });
</script>

8. When you provide a URL, the library handles the full AJAX lifecycle. The Save button disables during submission and shows a spinner. On success, the popup closes and the display value updates. On error, the button re-enables and shows the error message.

<span id="email"
  data-type="email"
  data-title="Email">
  [email protected]
</span>

<script>
  $('#email').editable({
    url: '/api/profile/email',
    ajaxOptions: { 
      type: 'POST', 
      dataType: 'json' 
    },
    validate: v => (!v ? 'Required field' : null)
  });
</script>

9. Return an error string from the validate function to block submission:

$('#age').editable({
  url: '/api/save',
  validate: function(value) {
    const num = parseInt(value);
    if (isNaN(num)) return 'Must be a number';
    if (num < 0 || num > 120) return 'Age must be 0-120';
    return null;
  }
});

10. Override how saved values display with the display callback:

$('#status').editable({
  source: [
    { value: 1, text: 'Active' },
    { value: 2, text: 'Inactive' }
  ],
  display: function(value, sourceData) {
    const item = sourceData.find(s => s.value == value);
    const color = value == 1 ? 'green' : 'red';
    return `<span style="color:${color}">${item.text}</span>`;
  }
});

11. Available configuration options:

• type: Sets the input type (e.g., 'text', 'select', 'date').
• name: The field name sent to the server.
• url: The server endpoint for saving data.
• pk: A primary key value sent with the request.
• title: The label shown in the editor header or as a placeholder.
• placement: The popup position ('top', 'bottom', 'left', 'right', 'auto').
• mode: The display mode, either 'popup' or 'inline'.
• source: Data for select inputs, provided as a URL or an array of {value, text} objects.
• multiple: Allows multiple selections for select inputs when true.
• emptytext: Display text when the element's value is empty.
• toggle: The event that triggers the editor, defaulting to 'click'.
• onblur: Defines behavior on focus loss ('cancel', 'submit', or 'ignore').
• inputclass: A CSS class for the editor's input field.
• placeholder: Placeholder text for the input field.
• value: The initial value, which overrides the element's text.
• disabled: Disables the editable element if true.
• defaultValue: A fallback value for an empty element.
• ajaxOptions: An object to configure the AJAX request (e.g., { type: 'POST' }).
• params: An object or function to add extra parameters to the AJAX request.
• display(value, sourceData): A function to customize how the final value is rendered.
• validate(value): A function for client-side validation that returns an error message to prevent submission.
• success(response, newValue): A callback that runs after a successful AJAX save.
• error(xhr, message): A callback that runs if the AJAX request fails.
• format: A string that defines the display format for date types (e.g., 'DD/MM/YYYY').

$('.editable').editable({
  type: 'text',
  name: this.el.getAttribute('name') || this.el.getAttribute('data-name'),
  url: this.el.getAttribute('data-url') || null,
  pk: this.el.getAttribute('data-pk') || null,
  title: this.el.getAttribute('data-title') || '',
  mode: 'popup',  // 'popup' | 'inline'
  placement: 'auto',
  emptytext: 'Empty',
  display: null,
  validate: null,
  params: null,
  ajaxOptions: { type: 'POST', dataType: 'json', contentType: 'application/x-www-form-urlencoded; charset=UTF-8', headers: {} },
  toggle: 'click',
  onblur: 'ignore',   // 'cancel' | 'submit' | 'ignore'
  inputclass: '',
  placeholder: '',
  value: undefined,
  defaultValue: undefined,
  source: undefined,  // array | object | url | function
  multiple: false,
  disabled: false,
  format: undefined
});

12. API methods:

// Show the editor
$('.editable').editable('show');

// Hide the editor
$('.editable').editable('hide');

// Toggle editor visibility
$('.editable').editable('toggle');

// Enable editing
$('.editable').editable('enable');

// Disable editing
$('.editable').editable('disable');

// Get current value
const value = $('.editable').editable('getValue');

// Set new value
$('.editable').editable('setValue', 'newname');

// Get or set options
$('.editable').editable('option', 'url', '/new/endpoint');
const url = $('.editable').editable('option', 'url');

// Remove editable functionality
$('.editable').editable('destroy');

13. Events:

• shown: Fired when the editor becomes visible.
• hidden: Fired when the editor is closed.
• save: Fired after a successful save. The event detail contains the newValue and server response.

// jQuery
$('.editable').on('save', function(e) {
  console.log('Saved:', e.newValue);
});

// Vanilla JS
document.querySelector('.editable').addEventListener('save', e => {
  console.log('New value:', e.detail.newValue);
  console.log('Server response:', e.detail.response);
});

Related Resources:

• 10 Best In-Place Editing Plugins In JavaScript

FAQs:

Q: Can I use this library without jQuery?
A: Yes. The library operates standalone using vanilla JavaScript. Import the script and call XEditable.init(element, options) or XEditable.initAll('.selector', options) directly. The jQuery bridge activates only when jQuery is detected on the page.

Q: Why does my select field display the numeric value instead of the text after saving?
A: The library needs access to the source data to map values back to text. Make sure you provide the source option either as a local array or a remote URL. The library caches this mapping internally. If you set the value programmatically with setValue(), the display updates only if the source data was already loaded.

Q: How do I customize the AJAX request format?
A: Use the ajaxOptions parameter to override request settings. Set the type to control HTTP method, dataType for response parsing, and contentType for request encoding. The params option lets you add extra data to the submission either as an object or a function that transforms the default params.

Q: What happens if the AJAX request returns an error?
A: The library calls your error callback with the XMLHttpRequest object and error message. The Save button re-enables and the editor stays open. You can return an error string from the success callback to display validation errors from the server response.

---

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