how to retrieve href value for an onclick event based on "class" selector in Javascript?

Question

Hi

I have

<a href="test.php?id=2" class="confirm_delete">Click to proceed</a>

and following javascript. When I click on above link it displays the dialog box with 2 buttons. "return false;" stops the default event of link tag. But I need the functionality in which when I click "Yes, delete" to take me to other page by choosing href value of a onclicked anchor. I tried alert($(this).attr('id')); (as I thought I could pick up HREF value using "this.attr('href')") but it displays "dialog".

How do I make it work so that when I click on a link having class name "confirm_delete" it displays me dialog, and if I click cancel it stays on the page otherwise takes me to page according to href value.

$(".confirm_delete").click(function(){
 $('<div id="dialog">Are you sure you want to delete?</div>').appendTo('body');
 $("#dialog").dialog({
  bgiframe: true, resizable: false, height:140, modal: true,
  overlay: {
   backgroundColor: '#000', opacity: 0.5
  },
  buttons: {
   'Yes, Delete all items in recycle bin': function() {
    $(this).dialog('close');
    $(this).remove();
    alert($(this).attr('id'));
   },
   Cancel: function() {
    $(this).dialog('close');
    $(this).remove();
   }
  }
 });
 return false;
 });

Thank you.

Answer 1

First off: try not to use underscores in class names. I've read somewhere they may cause problemsn...

Well, here:

$('a.confirm-delete').click( function(event) {
    if( !confirm('are you sure you want to go?') ) return false;
});

here I've usedd the javascript confirm dialog. You can easily replace that with a jquery modal dialog.

jrh

Answer 2

OK, I can retrieve value of HREF by var url = $(this).attr('href'); just after the $(".confirm_delete").click(function(){ line. It gives me "test.php?id=123" Only thing left is create/retrieve full url and redirecting to that url.

Thanks

Answer 3

This should do the trick:

$(".confirm_delete").click(function(){
       var $delete = $(this);
       ...
        $("#dialog").dialog({
                ...
                buttons: {
                        'Yes, Delete all items in recycle bin': function() {
                                $(this).dialog('close');
                                $(this).remove();
                                alert($delete.attr('id'));
                        }
                }
        });
        return false;
});