Bootbox: Make the default button work with the ENTER key?

Question

As the title suggests, I want to add the Enter key as an event handler for Bootbox.js. When you an alert() popup is called, you can press enter to dismiss it, but that is not the case with Bootbox.js. I do not know how to get access to the button inside Bootbox.js to add an event handler. Any suggestions?

score 8 · Accepted Answer · answered Jun 08 '15 at 15:07

8

In order for the button to take focus, it should be defined with the "btn-primary" class name:

className:
main: {
      className: "btn-primary",  ...
}

answered Jun 08 '15 at 15:07

ılǝ

3,440
2
33
47

2

this is only working when we do not have focus on any input field. – Ruchir Shukla Jun 23 '16 at 08:51

score 6 · Answer 2 · answered Aug 18 '16 at 10:15

I see this post has no answer yet for case when user has focus in the form itself

Here's how to do it :

Code :

$(document).on("submit", ".bootbox form", function(e) {
    e.preventDefault();
    $(".bootbox .btn-primary").click();
});

bootbox.dialog({
    title : "Title",
    message : $("#templateWithForm").html(),
    onEscape : true,
    buttons : 
    {
        success : {
            label : "OK",
            className : "btn-success btn-primary",
            callback : function() {
                // do something...
            }
        }
    }
})

Explanation :

First bit of code will catch the "submit" event for all bootbox dialogs with forms in it and prevent the submit with preventDefault() it will then emulate a click on the button that has className : "btn-primary"

(Note that it's going to trigger a click to all bootbox dialogs so you might wanna change it for your use case if you have more than a dialog on the page at once)

Second bit of code is a simple dialog calling. Important parts are

onEscape : true if you want to close the dialog with Escape key
className : "btn-success btn-primary" btn-success can obviously be changed to fit your needs

Hope this helps the next person !

All these years later, working on a legacy project and this was the answer I needed. It feels like a "hack" when it should be built-in functionality, but it works. — Greg Pettit, Sep 24 '21 at 00:54

Pearl Gonsalves · Answer 3 · 2021-01-08T06:50:19.217

2

You can just add 'bootbox-accept' className for the button you want to click on enter key press.

Example:

bootbox.dialog({
    title : "Title",
    message : "Your Message",
    onEscape : true,
    buttons : 
    {
        success : {
            label : "OK",
            className : "btn-success bootbox-accept",
            callback : function() {
                // do something...
            }
        },
        cancel:{
            label : "Cancel",
            className : "btn-danger",
            callback : function() {
                // do something...
            }
        },
    }
})

edited Jan 08 '21 at 06:50

answered Apr 08 '20 at 13:50

Pearl Gonsalves

21
2

nice! its really works for me! thank u Pearl! – Андрей Суржиков Oct 19 '21 at 08:25

score -1 · Answer 4 · answered Mar 07 '19 at 11:10

use btnclassName and assign "btn-primary as below in code

function ShowpopUp() {

    bootbox.confirm({
        size: "Large",
        btnclassName: "btn-primary",
         title: "Guests from outside your organization",
        message: "The following recipients are from outside of the SPSG organization:<br> <br> "
            +
            getSelectedNonMembersEmails()

            + "<br> <br> Are you sure you would like to send it?",

        callback: function (result) {
            if (result === true) {
                reportVm.currentPage(4);
            }
            else {
                bootbox.hideAll();

            }
        }
    });
}

Bootbox: Make the default button work with the ENTER key?

4 Answers4

Linked