How can i use Jquery ui dialog confirmation for gridview linkbutton?

Question

I have a linkbutton in Gridview for delete items. I wanna use (jquery ui dialog confirmation) with this button.

      <asp:LinkButton ID="lnkDelete" Font-Size="12px" runat="server" CausesValidation="False" CommandName="Delete" Text="Sil"></asp:LinkButton>

I could use jquery ui dialog confirmation before like this: (asp.button)

      function onayMesaj(msg) {
                    $("#divMesaj").html(msg);
              $("#divMesaj").dialog({
                  modal: true,
                  bgiframe: true,
                  buttons: {
                      "Yes": function () {
                         <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnGuncelleEkle))%>;
                      },
                       "No": function () {
                          $(this).dialog("close");
                      }
                  }
              });
              $("#divMesaj").parent().appendTo($("form:first"));
          }

I'm stuck. Please help. Thank you.

Answer 1

I was able to implement this solution by following this post: http://www.junnark.com/Blog/Detail/13

Basically, your delete button should be something like this:

<asp:ImageButton ID="IBtnDelete" runat="server" CommandArgument='<%#Eval("idcustomer")%>' 
    OnClientClick="javascript:return deleteItem(this.name, this.alt);"
    ToolTip="Click to delete" ImageUrl="~/Images/imagesActions/delete_action.png"
    AlternateText='<%#Eval("name")%>' OnCommand="deleteCommand" />

Your javascript function should be something like this:

function deleteItem(uniqueID, customerID) {
    var dialogTitle = 'Permanently delete ' + customerID + '?';   
    $('#' + '<%=linkDelete.ClientId %>').html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Please click delete to confirm deletion.</p>');
    $('#' + '<%=linkDelete.ClientId %>').dialog({
        title: dialogTitle,
        buttons: {
            "Delete": function () { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

    $('#' + '<%=linkDelete.ClientId %>').dialog('open');
    return false;
}

And, in your codebehind, you should have the command to delete the selected item. Something like this:

protected void deleteCommand(object sender, CommandEventArgs e)
    {
        customerDA cus = new customerDA();
        cus.deleteCustomer(Convert.ToInt32(e.CommandArgument.ToString()));
    }

That's it. Hope this helps!