Unable to access child control in gridview from javascript

Question

So here I am. I tried my best to do it on my own, I am a newbie to asp.net web-forms and I am beating my head for over a week on internet, read hundreds of posts but I totally failed in getting my issue fixed. I am using a grid view I have Link Button which I want to validate with jQuery UI dialog button. First of all I tried to attach event handler from code behind i.e. btnDelete_click(object sender, EventArgs e) to be called on Delete button click of jQuery dialog, implemented from here I completely failed, I saw that, if it was an independent button , not in a parent container like grid-view etc, it works as done in above link but if it was in grid it keep saying that provided Id doesn't exist in current context. I tried everything I could:

1) Made button ClientIDMode = Static and tried to access it using document.getElementById('<%= btnDelete.ClientID%>').click(); where btnDelete was ID of Link Button. Error I got btnDelete doesnt exist in current context.

2) Removed static option and Used document.getElementById('<%= gvDoctors.FindControl("<%= btnDelete.ClientID%>").click();. Error I got was Object reference not set to an instance of an object.

3) With and without static ID mode I tried all approaches, also used UniqueID even I copied ID from DOM Inspect Element after right-clicking and inspecting Link Button but all in vein.

I then tried different approach I tired to run JavaScript from code behind using Client.RegisterStartupScript. I used StartupScript so that the script runs at the end of document just before closing body and form tag so that all elements are created before getting referenced to. Using This approach I was able to display jQuery pop-up but still old issue I have to call event handler of code behind like btndelete_click(object sender EventArgs e) from JavaScript and its not happening.

Here is my code:

Web-Form

<asp:GridView ID="gvDoctors" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvDoctors_RowDataBound">
  <columns>
           <asp:TemplateField>
            <ItemTemplate>
              <asp:HiddenField ID="hdnUserID" runat="server" value='<%#DataBinder.Eval(Container.DataItem, "UserID")%>' />
            </ItemTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Delete">
             <ItemTemplate>
               <asp:LinkButton runat="server" ID="btnDelete" ClientIDMode="Static" CssClass="test" OnClientClick="return stopASPOnClick()" OnClick="btnDelete_Click">Delete
               </asp:LinkButton>
              </ItemTemplate>
             </asp:TemplateField> 

 </columns>
</asp:GridView> 
<script type="text/javascript">
$(document).ready(function () { 
    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;
});
function openDialog() {
    $('#dialog-delete').dialog({
        resizable: false,
        height: 150,
        width: 375,
        autoOpen: false,
        modal: true,
        buttons: {
            Delete: $("#dialog-delete").on('click', function (e) {
               document.getElementsById('<%= gvDoctors.FindControl("btnDelete").ClientID%>').click();
                $(this).dialog("close");
            }),
            Cancel: $("#dialog-delete").on('click', function () {
                $(this).dialog("close");
            })
        }
    });

   $('.test').click(function (e) {
        $('#dialog-delete').dialog('open');
    })
}


function stopASPOnClick() {
    return false;
}
</script>

So the Question being asked is how may I be able to get id of child control nested in a parent control like link button in grid, so that I can call its event handler from code behind, or it is not possible to retrieve same child control id as in server control to JavaScript(client side) and call their event handler like in the linked attached above. Thanks in advance.

Note:- I have also tried dialog script in document.Ready and without specifying them in function

Answer 1

If I understood your question correctly, you want to add a jQuery dialog to the LinkButtons in your GridView.

<asp:LinkButton OnClientClick='<%# "return openDialog(this, &#39;Do you want to delete " + Eval("UserID") + "?&#39;)" %>' ID="deleteItem" runat="server">Delete</asp:LinkButton>

And the JavaScript

<script type="text/javascript">
    var confirmed = false;

    function openDialog(obj, msg) {
        var btn1 = "Confirm";
        var btn2 = "Cancel";
        $('<div />').html(msg).dialog({
            resizable: false,
            draggable: false,
            modal: true,
            position: {
                my: 'center',
                at: 'top+250',
                of: window
            },
            buttons: [
            {
                text: btn1,
                icons: {
                    primary: "ui-icon-check"
                },
                click: function () {
                    $(this).dialog("destroy");
                    confirmed = true;
                    obj.click();
                }
            }, {
                text: btn2,
                icons: {
                    primary: "ui-icon-closethick"
                },
                click: function () {
                    $(this).dialog('close');
                }
            } ]
        });

        return confirmed;
    }
</script>