Customized alert and confirm dialogs: Add more options

[ivantcholakov]

size
btnOKIcon
btnCancelIcon

[ivantcholakov]

Customized confirm dialog: An option for swapping the places of OK and Cancel buttons:
Cancel OK
OK Cancel

[ivantcholakov]

#231

[ivantcholakov]

BootstrapDialog.DEFAULT_TEXTS['YES'] = 'Yes';
BootstrapDialog.DEFAULT_TEXTS['NO'] = 'No';

[nakupanda]

Hi @ivantcholakov

Is it still important to you to have the option setting order of buttons of confirm dialog? If so I will add it tomorrow.

[ivantcholakov]

It is not that urgent.

Currently I use a custom dialog for confirmations like this one (Twig parser code):

        $('body').on('click', '.delete_file_action', function(e) {

            var href = $(this).attr('href');

            BootstrapDialog.show({
                title: '{{ lang('ui_confirm')|e('js') }}',
                message: '{{ lang('ui_confirm_file_deletion', '<strong>' ~ filename ~ '</strong>')|e('js') }}',
                type: BootstrapDialog.TYPE_DANGER,
                buttons: [{
                    label: '{{ lang('ui_yes')|e('js') }}',
                    icon: 'fa fa-check fa-fw',
                    cssClass: 'btn-danger',
                    action: function(dialog) {
                        dialog.close();
                        window.location.href = href;
                    }
                }, {
                    label: '{{ lang('ui_no')|e('js') }}',
                    icon: 'fa fa-ban fa-fw',
                    action: function(dialog) {
                        dialog.close();
                    }
                }]
            });

            e.preventDefault();
            return false;
        });

It says "Do you really want to delete the file" with the buttons YES NO. It works, but code is verbose.

Nothing urgent.

[nakupanda]

OK, it looks good too.

[olaisen81]

Hi Nakupanda,
can you add the option for setting order of buttons in the confirm dialog?

[nakupanda]

Can't believe I haven't done it..

[nakupanda]

Here is a new option added to bootstrap-dialog about buttons order:

btnOrder: BootstrapDialog.BootstrapDialog.BUTTONS_ORDER_CANCEL_OK | BootstrapDialog.BUTTONS_ORDER_OK_CANCEL

The option affects the buttons order of BootstrapDialog.confirm() currently, this is also the only method that has two pre-defined buttons.

It's not in the latest release yet, you can download the latest archive of Master branch here and have a try https://github.com/nakupanda/bootstrap3-dialog/archive/master.zip

How to use:

BootstrapDialog.configDefaultOptions({
    btnsOrder: BootstrapDialog.BUTTONS_ORDER_OK_CANCEL
});

BootstrapDialog.confirm({
    ...
});

Or

BootstrapDialog.confirm({
    btnsOrder: BootstrapDialog.BUTTONS_ORDER_OK_CANCEL
});

[olaisen81]

Amazing 👍 Thanks so much Nakupanda :-)

[nakupanda]

No problem.

Time to close this issue.

[athirawdstech]

Uncaught TypeError: BootstrapDialog.show is not a function is coming while using requiredjs

(document).on('click','.delete-fvrt',function (){
//$('#ag-prof-remove-job-from-fav-confirmation').modal('show');
var th = $(this);
var dialogInstance4 = new BootstrapDialog.configDefaultOptions({
cssClass: 'for_confirmation for_confirmation1',

});

var dialogInstance5 = new BootstrapDialog.show({
title: 'Confirm',
message: 'Are you sure you want to remove this job from your Favorites?',

    buttons: [{
        label: 'Confirm',
         cssClass: 'for_delete_in_only',
          
        action: function() {
        var url = th.attr('data-url');
        var id = th.attr('data-id');
        $.ajax({
        url : url,
        data :{ 'id' : id },
        type : "POST",
        success: function(response){
        console.log(response);
        $(".favClick").trigger('click');
        }
        });
            dialogInstance5.close();
        }
    }, {
        label: 'Cancel',
        cssClass: 'for_cancel_in_only',
        action: function(dialogRef) {
            dialogRef.close();
        }
    }]
});

});