How to customize Bootbox.js prompt options

Question

I am trying to customize bootboxjs.prompt options, but it seems that it doesn't allow an options object as a parameter

This is the example from http://bootboxjs.com/index.html#api

bootbox.prompt("What is your name?", function(result) {                
  if (result === null) {                                             
    Example.show("Prompt dismissed");                              
  } else {
    Example.show("Hi <b>"+result+"</b>");                          
  }
});

This is what I am trying to pass:

var promptOptions = {
  title: "Custom label",
  buttons: {
    confirm: {
      label: "Save"
    }
  }
};

bootbox.prompt(promptOptions, function(result) {                
  if (result === null) {                                             
    console.log("Prompt dismissed");                              
  } else {
    console.log("Hi "+result);                          
  }
});

How can I customize the title and buttons label ?

score 25 · Accepted Answer · edited Jul 11 '17 at 13:40

25

You will be able to make a custom prompt using custom dialogs. The only thing you have to know is that the message string you give to bootbox doesn't have to be plain text. It can be HTML, so you can put your own prompt in a custom bootbox dialog.

What you are trying to do is this (using Bootbox 4.x):

bootbox.dialog({
  message: "First name:<input type='text' id='first_name'>",
  title: "Custom label",
  buttons: {
    main: {
      label: "Save",
      className: "btn-primary",
      callback: function() {
        console.log("Hi "+ $('#first_name').val());
      }
    }
  }
});

edited Jul 11 '17 at 13:40

Plochie

3,944
1
17
33

answered Nov 05 '13 at 15:57

haradwaith

2,701
15
20

is there any I can use javascript in the message ? – Suleman khan Feb 22 '16 at 10:23
http://stackoverflow.com/questions/35489040/how-to-select-images-from-a-dialog-and-embed-in-the-textarea this is my question if you can help me out ? – Suleman khan Feb 22 '16 at 10:24
is there way `ok` or `save` button remain disabled if input nothing – mumair Mar 28 '16 at 11:07

score 21 · Answer 2 · answered Jan 31 '14 at 10:04

21

bootbox.prompt only takes one parameter if you want to pass an object with your custom labels. So in order to make it work, you have to put your callback in your config object:

var promptOptions = {
  title: "Custom label",
  buttons: {
    confirm: {
      label: "Save"
    }
  },
  callback: function(result) {                
      if (result === null) {                                             
        console.log("Prompt dismissed");                              
      } else {
        console.log("Hi "+result);                          
      }
    }
};

bootbox.prompt(promptOptions);

answered Jan 31 '14 at 10:04

mseo

3,881
3
22
26

1

I agree with @mseo. This is the best way to use prompt correctly. check this : https://github.com/makeusabrew/bootbox/issues/143 (for the future visitors) – youssman May 10 '14 at 14:58
1

Unfortunately it seems that you need to use `.dialog` if you want to add the `message` option. – Ted Avery May 10 '15 at 08:09
@TedAvery no, `prompt` supports the `message` option. Check the latest docs: http://bootboxjs.com/documentation.html#bb-dialog-options – congusbongus Sep 22 '15 at 03:55
The message option isn't working for me either, but the documentation says it does? Weird. – Edward Feb 01 '16 at 04:05

How to customize Bootbox.js prompt options

2 Answers2