Bootbox.js modal disabled scripts

I have a problem with Tag It! plugin. I'd like to open a bootbox modal with two text areas - one for Notes and one for tagging persons. The thing is that it is working fine on page (finally I'll hide `itemNotesDiv' and allow it in modal only), but it's not working in modal. How to enable script in bootbox modal?

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

  • answered 2019-10-15 15:25 Stuart Frankish

    Edit: While I've provided an example below on triggering events after modal shown, I've just realised you're duplicating elements in your DOM with the same ID's - this is going to mean, as far as I understand it, the jquery selector will only return the first instance of the <ul id="taggedPersons"></ul> so your tag it will only work on the first one in the DOM - your duplicate copy isn't bound to the HTML you're passing in, it's copied beneath it.

    You can do a couple of things here before calling the tag it function;

    • Remove the original DOM elements so there is no conflict
    • Exclude the original with a more specific selector
    • Iterate over both and call tag it on both while hiding the original.

    I'm not familiar with Tag It! specifically but we do extensively use BootBox modals in our projects.

    Your scripts aren't "disabled" in Bootbox modals, they've already run.

    Looking at your implementation you'll need to trigger .tagit() after you call bootbox to load as you're creating new DOM elements after you've called the .tagit() function.

    If you use partial views however, and load the HTML content and associated JS into the modal with an ajax call, the $(document).ready() function will trigger.

    This is quite a bit different to my normal use of partial views for this this sort of thing but should suffice.

    This whole snippet should go inside your click event.

    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,
        });
    });