X-Editable и Bootstrap 4

Ранее я реализовал встроенное редактирование с помощью X-Editable и Bootstrap 3. В Bootstrap 4 оно больше не работает. Проверьте JsFiddle здесь.

Если я определю простое всплывающее окно, как это:

<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>

Он хорошо работает в BS3, но как только я переключаюсь на BS4, он больше не работает, выдавая ошибку:

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)

В консоли.

Что я делаю неправильно? Должен ли я использовать другую библиотеку/вилку?

Ответы

Ответ 1

Просто, чтобы помочь любому, у кого есть эта проблема, вот как я справился с этим. Я переключился на встроенный режим:

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

Это работает нормально, но кнопки не отображают никаких изображений из-за того, что глификоны больше не поддерживаются.

Я добавил font-awesome, а затем использовал следующий css, чтобы вернуть значки:

        .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;
    }

Кажется, что все работает по-прежнему. Спасибо Садху за то, что он указал мне в правильном направлении.

Ответ 3

Кажется, что это ошибка в bootstrap 4. Bootstrap 4 в настоящее время находится в бета-версии.

Проверьте ссылку ниже: https://github.com/vitalets/x-editable/issues/950

Ответ 4

Загрузите 4 примера с FontAwesome 4 по адресу https://jsfiddle.net/frallain/h5qmord2/ и с FontAwesome 5 по адресу https://jsfiddle.net/frallain/atwb19dz/

Кстати, CSS before ключевым словом требует двойного :

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