jQuery UI dialog not responding properly to Delete click

Question

I am brand-new to jQuery and trying to implement a jQuery UI dialog on a Gridview item by following this article: http://www.codeproject.com/Articles/238122/Delete-Functionality-in-GridView-with-Confirmation

I've stepped through this code using the Chrome Dev Tool and the dialog displays properly but when I click the Delete button, the associated anonymous function __doPostBack(uniqueID does not appear to fire. Can a JS breakpoint be set to trap a click of "Delete" button on the client side? For the server-side code, I've got a breakpoint in Visual Studio where the postback would normally be entered but its never hit.

Here is the relevant column of my ASP.Net Gridview:

<asp:TemplateField HeaderText="Deleting..">
        <ItemTemplate>
        <!--To fire the OnRowDeleting event.-->
        <asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete" 
            OnClientClick="return deleteItem(this);"
            ControlStyle-CssClass="buttonInRow"  
            Text="Delete">
        </asp:LinkButton>
        </ItemTemplate>
    </asp:TemplateField>

Here is how it renders:

<td>
        <!--To fire the OnRowDeleting event.-->
        <a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow" href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>
        </td>

I get no errors on the following scripts:

$(function() {
    InitializeDeleteConfirmation();
});

function InitializeDeleteConfirmation() {
$('#deleteConfirmationDialog').dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});
}
function deleteItem(element) {
var uniqueID = element.id;
var row = element.parentNode.parentNode;
// Cells[n]: n referring to the cell number displayed on GridView; n starting from 0...
var PositionTitle = row.cells[0].innerText;
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';

    $("#deleteConfirmationDialog").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>');

    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function () { __doPostBack(uniqueID, ''); 
                  $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
        }
     });

    $('#deleteConfirmationDialog').dialog('open');  
    return false;

}

The idea here is that deleteItem script above always returns false because (ostensibly) it handles the postback just before closing the dialog (i.e. same code as on the rendered HTML snippet above). Could this __doPostBack function be failing on me and not breaking in the debugger?

Answer 1

I found the solution to this problem. I will try to explain to help someone else in the future. The principle here is that the jQuery dialog is going to do the __doPostBack function directly from Javascript. The key to the problem is shown in the rendered snippet above also pasted here:

<a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow"    href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>

Note the difference in values between ID and the first argument to doPostBack:

id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete"

versus

  ('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete'

So, I changed my script to create a "postbackID" from the "uniqueID" as follows:

function deleteItem(element) {
var uniqueID = element.id;
var postbackID = uniqueID.split("_").join("$");
var row = element.parentNode.parentNode;
var PositionTitle = row.cells[0].innerText; 
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';
    $("#deleteConfirmationDialog").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>');
    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function() {
            __doPostBack(postbackID, ''); 
            $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
    }
});
$('#deleteConfirmationDialog').dialog('open');
return false;

}

There are probably more elegant ways to do this but I am thrilled to have successfully implemented the promised results in the great paper on CodeProject by junnark. For example, he retrieves this.name and uses that for direct invocation of __doPostBack. I tried adding the name attribute to my asp:LinkButton but it renders with the "short name" only rather than the full naming container name(s). In his article, he is using an ImageButton while I am using a LinkButton control so that probably is the root of that difference.

Answer 2

Your code is very confusing and difficult to follow. For .NET rendered controls I always suggest looking at the ends with selector.

Then your code simplifies to this:

$('[id$="lbDelete"]').on('click', function(e) {
  // Your link element available as a jQuery object
  var $el = $(this);

  // Prevent the link from firing before anything else can happen
  e.preventDefault();

  // Now you can manipulate the DOM using your link as a reference point
  // eg. $el.parent()...
});

Also you can put a breakpoint within this function to debug line-by-line.