Modal中的Bootstrap手风琴只能使用一次

Question

I have a problem with an accordion in a bootstrap modal dialog. I made it to implement it in durandal (v2.1) by adding this code to the standard 'dialog.js':

dialog.addContext('bootstrap', {
    addHost: function (dialogInstance) {
        var body = $('body'),
            host = $('<div class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
        host.appendTo(body);
        dialogInstance.host = host.find('.modal-content').get(0);
        dialogInstance.modalHost = host;
    },
    removeHost: function (dialogInstance) {
        $(dialogInstance.modalHost).modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    },
    compositionComplete: function (child, parent, context) {
        var dialogInstance = dialog.getDialog(context.model),
            $child = $(child);
        $(dialogInstance.modalHost).modal({backdrop: 'static', keyboard: false, show: true});
        //Setting a short timeout is need in IE8, otherwise we could do this straight away
        setTimeout(function () {
            $child.find('.autofocus').first().focus();
        }, 1);
        if ($child.hasClass('autoclose') || context.model.autoclose) {
            $(dialogInstance.blockout).click(function () {
                dialogInstance.close();
            });
        }
    }
});
//rebind dialog.show to default to a new context
var oldShow = dialog.show;
dialog.show = function (obj, data, context) {
    return oldShow.call(dialog, obj, data, context || 'bootstrap');
};

Looks nice and responsive, but the accordion works only once... the 2nd time it gets called nothing happens.

The Modal ist called by this function:

    function clickAktion() {
    var kunden = selectedCustomers();
    var updates = availableItems.updates();
    updates[0].text = '(Bitte auswählen)';

    app.showDialog('viewModels/aktion', {kunden: kunden, updates: updates});
    }

Any suggestions would be nice. I guess the mistake is anywhere in the dialog.js implementation. I tried a fiddle with pure jquery and bootstrap and there it worked...

Answer 1

The error was somewhere in die custom dialog implementation, didn't figure out where exactly. I switched to BootstrapModalDurandalJS and called it in my existing js function:

// some js function 'onClick'
app.showBootstrapDialog('viewModels/aktion', {customer: customer, updates: updates});

The corresponding view of the viewmodel, that i handed over, needs to look like this:

    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            this is some header content
        <!-- maybe some closing button etc. -->
        </div>
        <div class="modal-body">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Panel 1 Heading
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            Panel 1 Content
                        </div>
                    </div>
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Panel 2 Heading
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            Panel 2 Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>