Introduction
This tip aims to develop a confirmation box which provides Yes and No buttons using JQuery and Bootstrap. This article will make use of Bootstrap's Modal Dialog as an example while developing a confirmation box. We will develop a confirmation box without using plugin libraries specially designed for confirmation dialog boxes.
Background
The JavaScript confirm() is not quite flexible as it is limited to two buttons, Ok and Cancel. There are a lot of times we need a confirmation box which provides an option to allow users to click on buttons such as Yes, No, Cancel, Ok and so on... There are plenty of dialog plugins and libraries available... at times, it may not be suitable to use those in our project.
This tip provides ideas and a code example which can be used to create your own confirmation box. The example in this tip makes use of Bootstrap Modal Dialog. But it can be replaced with your own crazy way of displaying confirmation boxes.
JavaScript's confirm() function, being synchronous in nature would stop execution of the program until the user clicks on Ok or Cancel. This example does not replicate the synchronous nature of the JavaScript and is out of scope of this tip. A quick solution to replicate synchronous behaviour is to refactor the code which should be executed after clicking on one of the buttons.
Using the Code
In the <head> section, we will first include JavaScript files and stylesheets to make use of JQuery and Bootstrap.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https:
<!-- Bootstrap Optional Theme -->
<link rel="stylesheet"
href="https:
<!-- JQuery Javascript -->
<script src="https:
<!-- Bootscript JavaScript -->
<script src="https:
Next, in your <body> tag, create a Bootstrap Modal using <div> tags and Bootstrap CSS classes.
<div id="modalConfirmYesNo" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 id="lblTitleConfirmYesNo" class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p id="lblMsgConfirmYesNo"></p>
</div>
<div class="modal-footer">
<button id="btnYesConfirmYesNo"
type="button" class="btn btn-primary">Yes</button>
<button id="btnNoConfirmYesNo"
type="button" class="btn btn-default">No</button>
</div>
</div>
</div>
</div>
Now, we will develop the core logic, the script which will let us display the Confirmation Box. Within the <script> tag, place the following code:
function AsyncConfirmYesNo(title, msg, yesFn, noFn) {
var $confirm = $("#modalConfirmYesNo");
$confirm.modal('show');
$("#lblTitleConfirmYesNo").html(title);
$("#lblMsgConfirmYesNo").html(msg);
$("#btnYesConfirmYesNo").off('click').click(function () {
yesFn();
$confirm.modal("hide");
});
$("#btnNoConfirmYesNo").off('click').click(function () {
noFn();
$confirm.modal("hide");
});
}
In the function AsyncConfirmYesNo(), you can see that we are making use of callback functions. When the user clicks on the "Yes" button, the callback function, yesFn gets executed by the browser. We have also included a code to hide the Modal popup after the callback function has finished its execution.
We are now ready to make use of our own Yes No Confirmation box. We will first create a button to display our Confirmation Box.
<label>Yes & No: </label>
<button onclick="ShowConfirmYesNo()">Hunger Test</button>
(<label id="lblTestResult">Not Available</label>)
We call the function, ShowConfirmYesNo() in the click event of our button. In this event, we call the function, AsyncConfirmYesNo() and specify what happens when the user clicks on Yes or No buttons.
function ShowConfirmYesNo() {
AsyncConfirmYesNo(
"Yes & No Confirmation Box",
"Are you hungry?",
MyYesFunction,
MyNoFunction
);
}
In the code above, notice the last two parameters. These are function callbacks. It specifies which function should get executed when the user clicks on Yes or No. As these are callback functions, make sure that you do not write the opening and closing brackets after the function name.
To finsh this example, we will define what happens when the user clicks on the confirmation dialog buttons. We do this by writing our logic within MyYesFunction() and MyNoFunction() functions. Refer to the code above, you can see that we have passed "MyYesFunction" and "MyNoFunction" as parameters to function, AsyncConfirmYesNo(). Now when the user clicks on the Yes button, the code written below for MyYesFunction() is executed.
function MyYesFunction() {
alert("Time to get off your workstation!");
$("#lblTestResult").html("You are hungry");
}
function MyNoFunction() {
alert("Well... just continue working.");
$("#lblTestResult").html("You are not hungry");
}
That is it! You can now refactor this code to your liking and move it to a .js file. You can then use function, AsyncConfirmYesNo() whenever and wherever you want to display the Confirmation Box.
Points of Interest
Well... I was really hungry while coding... I couldn't stop thinking about a Pizza! Ended up eating Chocochip cookies! Yummie....
We can do plenty of changes with the code we have developed. We can create confirmation boxes which allow the developer to specify buttons text labels. We can also create a logic which allows the user to specify array of buttons. We can further develop on this idea and create a reusable control customized according to the needs of the project.
History
- 29th March, 2015: Initial version
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
Submit an article or tip
