Basic Edit In Place Plugin jQuery - jQuery eip.js

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.

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.

  • Publication date: 18.01.2018
  • Source