Basic Edit In Place Plugin jQuery - jQuery eip.js
File Size: | 38.9 KB |
---|---|
Views Total: | 4729 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.