Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize Bootbox.js prompt options

Tags:

bootbox

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 ?

like image 694
Mariano J. Ponce Avatar asked Oct 30 '13 13:10

Mariano J. Ponce


People also ask

How do I close Bootbox dialog?

Pressing the ESC key or clicking close () dismisses the dialog and invokes the callback as if the user had clicked the Cancel button.

What is Bootbox in JavaScript?

js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JavaScript event handlers.


2 Answers

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());
      }
    }
  }
});
like image 125
haradwaith Avatar answered Sep 19 '22 19:09

haradwaith


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);
like image 43
mseo Avatar answered Sep 22 '22 19:09

mseo