Previously I have implemented inline editing with X-Editable and Bootstrap 3. With Bootstrap 4 it no longer seems to work. Check out the JsFiddle here.
If I define a simple popup like this:
<div style="margin: 150px">
<a href="#" class="comment" data-name="comment" data-type="text" data-pk="@item.Id" data-url="/" data-title="Enter comment">comment</a>
</div>
<script>
$(document).ready(function() {
$('.comment').editable();
});
</script>
It works fine in BS3 but as soon as I switch to BS4 it no longer works giving the error:
Uncaught TypeError: Cannot read property 'addClass' of undefined
at Popup.show (bootstrap-editable.js:1091)
at Editable.show (bootstrap-editable.js:1802)
at Editable.toggle (bootstrap-editable.js:1824)
at Editable.<anonymous> (bootstrap-editable.js:1547)
at HTMLAnchorElement.e (jquery-3.2.1.slim.min.js:2)
In the console.
What am I doing wrong? Should I be using a different library/fork?
editable('toggle'); $('span[data-id=' + id + '][data-type=date]'). editable('toggle'); }); The desired result is that when you click 'Edit' the entire row will show the xeditable inline text box where you can enter text along with the checkmark and the exit buttons.
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery. This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.
There is a new release that support Bootstrap 4:
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With