Using bootstrap modal with Tabpanel to set active tab

Question

I'm using the jquery below to control what happens when a tab is clicked in a AjaxControlToolkit tabcontainer.

If a hidden text input (hdnFormSaved) has a value of "True", the clicked tab is set as active ( this.get_owner().set_activeTab(this) ), else a confirm dialog is created. The clicked tab is only then set as active if confirmed via the dialog.

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    if (confirm('Do you want to change tab?'))
                        this.get_owner().set_activeTab(this);
                    else
                        return false;
                }
        };
});

This solution works perfectly. However, I would like to replace the confirm dialog with a bootstrap modal.

<div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to change tab?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

I've got as far as initialising a modal inside the else block rather than a confirm dialog. From here, I'm not sure how to proceed to set the clicked tab as active if the modal's OK button is clicked. Can/should I listen for the event within the same else block?

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    $('#myModal').modal();
                }
        };
});

Any advice is welcome. Thanks.

Answer 1

Solved as below:

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    obj = this;
                    $('#myModal').modal();
                        $("#btn_okay").on("click", $.proxy(function () {
                            this.get_owner().set_activeTab(this);
                        }, this));
        }
    };
});

I gave the modal OK button an id of #btn_okay and used jquery's proxy to pass the context to the on anonymous function.