CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapbootstrap-modal
demo
demo

Reputation: 6235

Custom Confirmation dialog doesn't work properly

I have created custom dialogs like Alert and ConfirmDialog with Bootstrap and Jquery.

Here is sample : http://jsfiddle.net/eb71eaya/

Problem - in the callback I make an ajax call, and if it returns true - I show an alert with status success else - error. But this alert doesn't show while request makes delete. (In the example I don't make an ajax request, just show alert, but that also doesn't work.)

    function getEsrbAlertDialog(title, msg, callBack, obj) {
    var esrbAlertDialog = $('#esrb-dialog');
    if (esrbAlertDialog.length == 0) {
        esrbAlertDialog = getEsrbDialog(title, msg);
    } else {
        $('.modal-title', esrbAlertDialog).html(title);
        $('.modal-body', esrbAlertDialog).html(msg);
    }

    $('.modal-footer div', esrbAlertDialog).empty();
    $('.modal-footer div', esrbAlertDialog).append('<button class="btn btn-primary pull-right close-btn">Close</button>');

    $('.close-btn', esrbAlertDialog).unbind('click').click(function () {
        if (typeof callBack === "function") {
            todo = callBack(obj);
        }
        esrbAlertDialog.modal('hide');
    });

    return esrbAlertDialog;
};

I want to execute callback when confirmation dialog become closed.

UPDATE : I understand logic like this : When user click on "Ok"-button, dialog must be closed. And when it is already closed then fire event 'hidden.bs.modal' which must execute callBack. But CallBack executes before confirm dialog finish hiding.

Upvotes: 0

Views: 268

Answers (2)

Jeroen
Jeroen

Reputation: 2021

This line:

esrbConfirmationDialog.modal('hide');

Is hiding the second dialog.

EDIT: Both dialogs use the same div as there reference: 

var esrbAlertDialog = $('#esrb-dialog');

Create seperate dialogs one for the alert and one for confirmation.

Upvotes: 1

Girish Sakhare
Girish Sakhare

Reputation: 763

Just replace this.Alert function to below code, i.e. just add e.preventDefault();

this.Alert = function (dialogMsg, callBack, obj) {   

    var dlg = getEsrbAlertDialog('Alert', dialogMsg, callBack, obj);   
       e.preventDefault();
    dlg.modal('show');
};

Upvotes: 0

Related Questions