Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

X-Editable and Bootstrap 4

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?

like image 466
Lobsterpants Avatar asked Oct 25 '17 07:10

Lobsterpants


People also ask

How do you use editable X?

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.

What is Xeditable?

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.


1 Answers

There is a new release that support Bootstrap 4:

https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable

like image 161
Björn C Avatar answered Nov 15 '22 13:11

Björn C