Basic Edit In Place Plugin jQuery - jQuery eip.js

eip.js is a very small (2kb minified) jQuery edit in place plugin for Bootstrap that allows you to click and edit web content instead of in a separate panel. Press Enter to apply the new value. Press Esc to get back to the old value. Compatible with Bootstrap framework.

How to use it:

1. Insert the JavaScript file eip.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="src/eip.js"></script>

2. Add the CSS class 'editable' to the element which should be editable.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Username</th>
      <th><span class="editable">Website</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span class="editable">Mark</span></td>
      <td><span class="editable">www.jqueryscript.net</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span class="editable">Jacob</span></td>
      <td><span class="editable">www.google.com</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span class="editable">Larry</span></td>
      <td><span class="editable">www.facebook.com</span></td>
    </tr>
  </tbody>
</table>

3. Attach the editable function and done.

$(function(){

  $('.editable').editable();

});

4. The plugin also provides a callback function which will be triggered if the new value is valid.

$('.editable').editable({
  onChange: doAjax
});

// Callback function
  const doAjax = (ev) => {
  const alert = document.querySelector('.alert');

  alert.querySelector('span').innerHTML = `<b>${ev.oldValue}</b> has become <b>${ev.newValue}</b>`;

  alert.classList.toggle('hidden');
  alert.classList.toggle('ajax-done');

  setTimeout(() => {
    alert.classList.toggle('ajax-done');
    alert.classList.toggle('hidden');
  }, 2000);
}

---

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