Bootbox - how to dynamically change message content?

Question

I was wondering if there is a way to dinamically update the content of a bootbox modal.

Example

bootbox.dialog({
        message: "Hi there",
        title: "My title",
        buttons: {
            main: {
                label: "dismiss",
                className: "btn-primary",
            }
        }
    });


    newMessage = "this is a new message"

Is there a way to replace that "Hi there" with the new string newMessage?

Thanks for any help or suggestion

score 8 · Answer 1 · answered Oct 20 '16 at 10:01

8

yes, you can change bootbox msg by adding id reference to the msg. Below is sample code for it.

    bootbox.dialog({
       message: "<span id='dynamicMsg'>Hi there</span>",
       title: "My title",
       buttons: {
        main: {
            label: "dismiss",
            className: "btn-primary",
        }
      }
    });

    //Add this line wherever you want to change msg
    $("#dynamicMsg").text("This is dynamic msg");

answered Oct 20 '16 at 10:01

Akash

559
6
17

For me this is the better solution, not the accepted one – auron344 Jun 23 '21 at 10:54

score 2 · Accepted Answer · edited Sep 12 '15 at 04:43

2

Simple! Create a generic function:

function bootBoxModal(title, message, type) {
    bootbox.dialog({
        message: message,
        title: title,
        alertType: type,
        buttons: {
            main: {
                label: 'Fechar', className: 'btn-default'}
        }
    });
}

Call the function now:

bootBoxModal("Title message", 
             "Content your message", 
             "type [alert,danger,warning,success]");

edited Sep 12 '15 at 04:43

Nunser

4,512
8
25
37

answered Sep 12 '15 at 03:49

Cesar Balzer

36
4

Why this is the accepted answer? It doesn't create another dialog everytime you call that function instead of updating the existing one? – auron344 Jun 23 '21 at 10:53

score 0 · Answer 3 · answered Nov 30 '17 at 10:51

0

Another solution is just to replace the content directly, this example uses jQuery.

#jQuery
$('.modal-title').html('New Title');
$('.modal-body').html('New Message');

answered Nov 30 '17 at 10:51

mistajolly

441
4
5

Bootbox - how to dynamically change message content?

3 Answers3