jQuery UI confirmation dialog and asp.net postback

Question

I have a delete button in a gridview. For those not familiar with asp.net my delete button outputs like so:

<a id="ctl00_cp1_dtgrAllRates_ctl02_lbDelete" 
   class="lb"
   href="javascript:__doPostBack('ctl00$cp1$dtgrAllRates$ctl02$lbDelete','')">
Delete</a>

I have a confirmation dialog hooked up to all the delete links in the gridview to ask the user if they are sure they want to delete. It pops up no problem but I want to fire the postback (the href value) if they click confirm. I'm not sure how to do this as the dialog code is seperate to the link that is clicked so I can't just grab the href on 'this' eg

var theID = $(this).attr("href");

and fire that. Is there some way I can pass the href val as a parameter to the dialog code or something so that the 'Confirm Delete' section uses it when the button is clicked and if 'Cancel' is clicked the dialog just closes?

Here is my jQuery code:

$(document).ready(function(){
    $("#dialog").dialog({
      bgiframe: true,
      autoOpen: false,
      width: 400,
      height: 200,
      modal: true,
      buttons: {
                'Confirm Delete': function() {
                    $(this).dialog('close');
                    //fire href here preferably
                    },
                Cancel: function(){
                    $(this).dialog('close');
                    }
            }
    });

    $(".lb").click(function(event){
        $("#dialog").dialog('open');
        event.preventDefault();
    });

});

TIA

Lloyd

Answer 1

Ok, managed to solve it. I came across this post which helped a little:

How to implement "confirmation" dialog in Jquery UI dialog?

However the example provided in the post wasn't quite working simply because the instantiation of the dialog was incorrect on the click handler. There is a different way of setting properties/options on the dialog once a dialog has already been instantiated. So my final code was:

$(document).ready(function(){

$("#dialog").dialog({
  modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
  autoOpen: false
  });


$(".lb").click(function(e) {
    e.preventDefault();
    var theHREF = $(this).attr("href");


    $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
                },
            "Cancel" : function() {
                $(this).dialog("close");
                }
            });

    $("#dialog").dialog("open");

});

});

Hope this helps someone else. Gurdas, thanks for your help, it definately got the gears turning. :)

Answer 2

There's probably a cleaner way to do this, but i'd think you'd have to nab the context of the link you click in order to use its href in the construction of the dialog; and then fire the dialog's open even after it's been constructed with that parameter; i'm going to think a little more about a more efficient method, but hopefully this gets a few gears turning...

 $(".lb").click(function(event){    

      var theHREF = $(this).attr("href");



       $("#dialog").dialog({
      bgiframe: true,
      autoOpen: false,
      width: 400,
      height: 200,
      modal: true,
      buttons: {
                'Confirm Delete': function() {

                    //href fired here
                    window.location.href= theHREF; 

                    },
                Cancel: function(){
                    $(this).dialog('close');
                    }
            }    

    }).dialog('open');

Answer 3

Some times ago I've build up a web control to do that, in a standard, integrated way. Take a look.