Pages Navigation Menu

Coding is much easier than you think

How to use JQuery dialog as Confirm dialog?

Posted by on Aug 14, 2015 in jQuery, jQuery UI | 0 comments

 
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.
 
jquery-confirm-dialog
 
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

 

Reference

 
jQuery closest() Method
 

Read More