Confirmation dialog with jQuery

Download Exercise Files

Discussion (11 comments)

• 

  Qaysar Akbar on Wednesday, 7th March 2012

  Hello Sebastian,
  Another wonderful tutorial.
  I just wanted to ask a quick question.
  If I had table of records and I wanted to delete one I click on the icon/link to delete would the confirmation dialog display above the records?
  Example: The record of tables is behind the actual confirmation dialog?
  Thank you for your help.

  Reply

• 

  Sebastian Sulinski : @designtutorials on Wednesday, 7th March 2012

  Hi Qaysar,
  You could do it in two ways.

  One would be to have the confirmation dialog displayed in the similar way as the one in this tutorial, but rather than a div it would be an extra table row before the record itself, which would be hidden by default.

  The other approach is to use one of the light box plugins to have it done with the background faded out and the confirmation in the center of the screen.

  Reply

• 

  Aldrin Butcon on Wednesday, 21st March 2012

  Hi Sebastian,
  This is a great tutorial, replacing the old javascript confirm dialog box.
  But I just wonder how I can implement this using jquery ui confirm dialog box.
  I tried it several times but it didn't work. I know this is out of the scope of the tutorial
  but any comment will be much appreciated.
  Thank you..

  Reply

• 

  Sebastian Sulinski : @designtutorials on Wednesday, 21st March 2012

  Hi Aldrin,
  It's actually pretty straight forward - if you look at this example here for instance: http://jqueryui.com/demos/dialog/#animated.

  The source of this example shows something like this:

  <script>
  $.fx.speeds._default = 1000;
  $(function() {
  	$("#dialog").dialog({
  		autoOpen: false,
  		show: "blind",
  		hide: "explode"
  	});	
  	$("#opener").click(function() {
  		$("#dialog").dialog("open");
  		return false;
  	});
  });
  </script>
  
  <div id="dialog" title="Basic dialog">
  	<p>This is an animated dialog which is useful for displaying information. 
  		The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
  
  <button id="opener">Open Dialog</button>
  

  Looking at this example what you need to do is to apply the following to the Remove link:

  $('.removeConfirm').click(function() {
  	$(this).parent().prev('.confirm').dialog("open");
  	return false;
  });
  

  And have the previous code amended like so:

  $('.confirm').dialog({
  	autoOpen: false,
  	show: "blind",
  	hide: "explode",
  	modal: true,
  	buttons: {
  		"Yes": function() {
  			var thisId = $(this).attr('data-id');
  			jQuery.post(formObject.urlRemove, { id : thisId }, function(data) {
  				if (!data.error) {
  					$(this).dialog("close");
  				}
  			}, 'json');
  		},
  		Cancel: function() {
  			$(this).dialog("close");
  		}
  	}
  });
  

  I haven't tried it, but it shouldn't be far from what you'd be looking at.

  Reply

• 

  Aldrin Butcon on Thursday, 22nd March 2012

  Hi Sebastian,
  
  It's me again.
  After hours of experimenting, I finally got it, with the help of your code above.
  I just changed it a bit, I assigned an id attribute to the confirm div which can be referenced
  by the remove link by checking if the data-id and id attribute of the remove link and confirm div respectively match. Unfortunately, I am not able to paste the codes because it gives an error
  when posting.
  
  I also learned some of the features of HTML5 like time element, data-id and datetime attributes.
  Thanks again Sebastian. More power to you and to SSD Tutorials.

  Reply

• 

  Sebastian Sulinski : @designtutorials on Thursday, 22nd March 2012

  Thanks Aldrin - I'm glad you've managed to sort it out.

  Reply

• 

  Qaysar Akbar on Friday, 23rd March 2012

  Hi Aldrin,
  I was hoping you would be able to share your code with me on how you achieved the confirm dialog box using jQuery UI confirm dialog box.
  I'm after the same type of effect.
  Thank you

  Reply

• 

  Sebastian Sulinski : @designtutorials on Friday, 23rd March 2012

  Hi Aldrin,
  If you could send the code over to me by email, I'll post it for everyone interested to be able to use it as well - that would be a nice addition to this tutorial.

  Reply

• 

  Aldrin Butcon on Saturday, 24th March 2012

  $(function() {
  	$('.removeConfirm').click(function() {
  		var id = $(this).attr('data-id');
  		$('#'+id).dialog('open');
  	});
  	
  	$('.confirm').dialog({
  		autoOpen: false,
  		show: "blind",
  		hide: "explode",
  		modal: true,
  		buttons: {
  			Yes: function() {
  				var thisId = $(this).attr('id');
  				jQuery.post('mod/remove.php', { id : thisId }, function(data) {
  					if (!data.error) {
  						$(this).dialog("close");
  					}
  				}, 'json');
  				$(this).dialog("close");
  			},
  			No: function() {
  				$(this).dialog("close");
  			}
  		}
  	});
  });
  

  Reply

• 

  Aldrin Butcon on Saturday, 24th March 2012

  Hi Sebastian,
  I have sent an email with my code for jQuery ui confirm dialog box.
  Actually, it's just like the given code above.
  I just changed some line of codes for me to understand, nothing special there. :)
  But I'm glad if this will be helpful...
  Thank you...

  Reply

• 

  Sebastian Sulinski : @designtutorials on Saturday, 24th March 2012

  Hi Aldrin,
  Thanks for sending it - I've just published it.

  Reply

Add a comment

Name: *	Email: *
Website:	Twitter:
Comment (no html allowed): *
Add Comment

First name: *
E-mail: *
Subscribe