Bootbox.js модальные отключенные скрипты - PullRequest
Новая
       27

Bootbox.js модальные отключенные скрипты

0 голосов
/ 15 октября 2019

У меня проблема с Tag It! плагин. Я хотел бы открыть модальный bootbox с двумя текстовыми областями - одна для Notes и одна для пометки людей. Дело в том, что он отлично работает на странице (наконец, я скрою itemNotesDiv и разрешу его только в модальном режиме), но в модальном он не работает. Как включить скрипт в загрузочном модале? 

<div id="itemNotesDiv">
    <form class="js-exampleForm">
        <h4>Notatki</h4>
        <hr />
        <div class="form-group">
            @Html.Label("Notatki", htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-10">
                @Html.TextArea("itemNotes", null, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Otaguj osoby", htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-10">
                <ul id="taggedPersons"></ul>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#taggedPersons").tagit( {
            availableTags: @Html.Raw(Json.Encode(@ViewBag.Users)),
            allowDuplicates: false,
            allowSpaces: true,
        });
    });

    $('#activeItemsTable tbody').on('click', "a[name='itemNotes']", function (){
        var bootboxHtml = $('#itemNotesDiv').html()
            .replace('js-exampleForm', 'js-bootboxForm')
            .replace('itemNotes', notes);

    bootbox.confirm(bootboxHtml, function (result) {
        if (result) {
            /// code ///
        }
    });
});

</script>

1 Ответ

1 голос
/ 15 октября 2019

Редактировать: Хотя я привел приведенный ниже пример запуска событий после показа модального режима, я только что понял, что вы дублируете элементы в DOM с одинаковыми идентификаторами - это будет означать,Насколько я понимаю, селектор jquery будет возвращать только первый экземпляр <ul id="taggedPersons"></ul>, поэтому ваш тег будет работать только с первым экземпляром в DOM - ваша дубликат не привязан к передаваемому вами HTMLв, он скопирован под ним.

Вы можете сделать несколько вещей здесь перед вызовом функции tag it;

  • Удалить исходные элементы DOM, чтобы не было конфликта
  • Исключить оригинал с более конкретным селектором
  • Выполнить итерацию по обоим и вызвать тег на обоих, скрывая оригинал.

Я не знаком с тегомЭто! в частности, но мы широко используем модалы BootBox в наших проектах.

Ваши скрипты не "отключены" в моделях Bootbox, они уже запущены.

Рассматривая реализацию, которая вам понадобитсявызывать .tagit() после вызова bootbox для загрузки при создании новых элементов DOM после вызова функции .tagit().

Однако, если вы используете частичные представления и загружаете содержимое HTML и связанные с нимJS в модал с помощью вызова ajax, сработает функция $(document).ready().

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

Весь этот фрагмент должен находиться внутри события клика. 

var bootboxHtml = $('#itemNotesDiv').html()
var x = bootbox.confirm({
    message: bootboxHtml,
    callback: function (result) {
        // closure callback
    }
});

x.on("shown.bs.modal", function () {
    alert("call your function here...");

    $("#taggedPersons").tagit({
        availableTags: @Html.Raw(Json.Encode(@ViewBag.Users)),
        allowDuplicates: false,
        allowSpaces: true,
    });
});
...