How to use JQuery dialog as Confirm dialog?
There are quite a few articles you might have read on SimpleCodeStuffs on jQuery like jQuery Tutorial for Beginners, AJAX implementation in Servlets using jQuery and jQuery UI etc.
This example will help you if you have any one of below queries:
- How to implement “confirmation” dialog in jQuery UI dialog?
- How to use jQuery UI dialog as JavaScript confirm BOX?
- How to use JQuery dialog as Confirm dialog?
- jQuery UI Replacement for alert()
Issue: How many times did you have to code some confirmation logic on your website to ensure that your users are sure about the action they are about to perform?
A typical example is prompting the user to confirm that they are sure about deleting a record. In typical/boring JavaScript world, you would do something like this:
HTML
<input type="submit" id="delete" value="Delete" onclick="javascript:deleteConfirmation();" />
Javascript
function deleteConfirmation() {
return confirm("Are you sure you want to delete this item?");
}
There is nothing wrong with this above code. However, it is plain. You cannot customize it with CSS make it look consistent with your site’s colour and identity.
jQuery to the rescue
jQuery UI has the solution for you. You can use the jQuery UI Dialog to present users with customized confirmation/dialog boxes as shown below.
Let’s see how to implement this
HTML
Firstly, let’s add the necessary jQuery libraries in the head section of the Jsp page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- User Defined Js file -->
<script type="text/javascript">/js/confirmJs.js</script>
</head>
<body>
<form method="post" action="delete.html">
<input type="submit" class="button" id="Delete" name="Delete" value="Delete" />
</form>
</body>
</html>
jQuery
File: confirmJs.js
$(document).ready(function(){
$('#Delete').click(function(event) {
event.preventDefault();
var currentForm = $(this).closest('form');
/** Create div element for delete confirmation dialog*/
var dynamicDialog = $('<div id="conformBox">'+
'<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">'+
'</span>Are you sure to delete the item?</div>');
dynamicDialog.dialog({
title : "Are you sure?",
closeOnEscape: true,
modal : true,
buttons :
[{
text : "Yes",
click : function() {
$(this).dialog("close");
currentForm.submit();
}
},
{
text : "No",
click : function() {
$(this).dialog("close");
}
}]
});
return false;
});
});
The code above instantiates the dialog box and assigns it two buttons. The”Yes”and”No”buttons. The “Yes” is responsible for submitting the form to the server.
Other jQuery tutorial from our Blog
- Ajax Cascading DropDownList in JSP & Servlet using JQuery and JSON
- Autocomplete in java web application using Jquery and JSON