X-Editable and Bootstrap 4

Question

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?

Hydrate

Answer 1

Just to help anyone else who has this problem, here is how I dealt with it. I switched to inline mode:

 $(document).ready(function() {
        $('.comment').editable({
            mode: 'inline',
        });
        $('.hours').editable({
            mode: 'inline',
            type: 'number',
            step: '1.00',
            min: '0.00',
            max: '24'
        });
    });

This works OK but the buttons don't render any images due to glyphicons no longer being supported.

I added font-awesome and then used the following css to get the icons back:

        .glyphicon-ok:before {
        content: "\f00c";
    }
    .glyphicon-remove:before {
        content: "\f00d";
    }
    .glyphicon {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

All seems to work as before. Thanks to Sadhu for pointing me in the right direction.

Hydrate

Answer 2

There is a new release that support Bootstrap 4:

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

Eliathas

this is some user's fork – Distinctive

This should be the accepted answer as it solves the problem with the default style. – Invar

Need font-awesome css to see submit and cancel buttons. CDN Link: bootstrapcdn.com/fontawesome – Hoagland

Answer 3

It seems that this is bug in bootstrap 4. Bootstrap 4 is currently in beta release.

Check below link : https://github.com/vitalets/x-editable/issues/950

Mahican

Thanks - reading that gave me the idea to use inline. A few further tweeks and it was sorted :) – Hydrate

Another ticket raised: github.com/vitalets/x-editable/issues/1043 – Kaczmarek

Answer 4

Bootstrap 4 examples with FontAwesome 4 at https://jsfiddle.net/frallain/h5qmord2/ and with FontAwesome 5 at https://jsfiddle.net/frallain/atwb19dz/

BTW the CSS before keyword requires a double :

            .glyphicon-ok::before {
                content: "\f00c";
            }
            .glyphicon-remove::before {
                content: "\f00d";
            }
            .glyphicon {
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-style: normal;
            }

Gesture

Answer 5

Here's another more through sample that makes x-editable compatible with Bootstrap 4

https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728

From the css, you can take everything below line 69 .form-group label {...

For the javascript part, you can copy the following in your document load

$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
'<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';

In addition to the basic x-editable dependencies, you will also need FontAwesome.

Lumberman