Cannot cause $(this).find("a").click(); to fire using JQuery

Question

Hi Everyone,

I have a small question which should be very easy for the jquery experts out there. I am trying to follow http://aspdotnetcodebook.blogspot.com/2010/01/page-languagec-autoeventwireuptrue.html to be able to perform an action on gridview row double click. I can redirect to another page fine (as shown in the example) but I cannot cause the $(this).find("a").click(); to fire. Below is my GridView markup.

<asp:GridView ID="gvCustomers" runat="server" DataSourceID="odsCustomers" CssClass="datagrid"
        GridLines="None" AutoGenerateColumns="False" DataKeyNames="Customer_ID" PageSize="3"
        AllowPaging="True" AllowSorting="True" OnRowCommand="gvCustomers_RowCommand"
        OnRowDataBound="gvCustomers_RowDataBound">
        <Columns>
            <asp:BoundField DataField="Customer_ID" HeaderText="ID" ReadOnly="true" Visible="false" />
            <asp:BoundField DataField="Customer_FirstName" HeaderText="First Name" ReadOnly="true" />
            <asp:BoundField DataField="Customer_LastName" HeaderText="Last Name" ReadOnly="true" />
            <asp:BoundField DataField="Customer_Email" HeaderText="Email" ReadOnly="true" />
            <asp:BoundField DataField="Customer_Mobile" HeaderText="Mobile" ReadOnly="true" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkButton" runat="server" CommandName="showVehicles" CommandArgument='<%# Eval("Customer_ID") %>'
                        ></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <EmptyDataTemplate>
            Sorry No Record Found.
        </EmptyDataTemplate>
    </asp:GridView>

I just cant make it work as the author has suggested: /* or you could have a hidden LinkButton in the row (Text="" or not set) that you could trigger. Make sure you set the CommandName="Something" and CommandArgument="RecordId" */

on the OnCommand of linkButton, I have my server side method which I would like to fire. Any ideas will be most apprecited.

Thanks, Ali

Answer 1

@Nalum and Nick : Here is the HTML generated by the page:

Untitled Page

<script src="JQueryScripts/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

   var selected = null;

$(document).ready(function(){ $("#gvCustomers").find("tr").click(function(){ $(selected).removeClass("selected"); $(this).addClass("selected"); selected = this; }); $("#gvCustomers").find("tr").dblclick(function(){ var Id = $(this).find("td:nth-child(1)").text(); window.location = "/CustomersVehiclesWebSite/Default2.aspx?record=" + $(this).find("td:nth-child(1)").text(); $(this).find("a").click(); });

});

function doPostBack(element) { tb_remove(); setTimeout('__doPostBack(\'' + element.name + '\',\'\')', 500); // 500ms given to thickBox to remove itself }

</script>

<form name="form1" method="post" action="Default.aspx" id="form1">

// //

<script type="text/javascript">

//

<div>
    <div>
<table class="datagrid" cellspacing="0" border="0" id="gvCustomers" style="border-collapse:collapse;">
    <tr>
        <th scope="col">ID</th><th scope="col">First Name</th><th scope="col">Last Name</th><th scope="col">Email</th><th scope="col">Mobile</th><th scope="col">&nbsp;</th>

    </tr><tr>
        <td>1</td><td>Ali</td><td>Ali</td><td>[email protected]</td><td>07826137369</td><td>
                    <a id="gvCustomers_ctl02_lnkButton" href="javascript:__doPostBack('gvCustomers$ctl02$lnkButton','')"></a>
                </td>
    </tr><tr>
        <td>2</td><td>John</td><td>Harris</td><td>[email protected]</td><td>07847858745</td><td>

                    <a id="gvCustomers_ctl03_lnkButton" href="javascript:__doPostBack('gvCustomers$ctl03$lnkButton','')"></a>
                </td>
    </tr><tr>
        <td>3</td><td>Paul</td><td>Collingwood</td><td>[email protected]</td><td>07976137469</td><td>
                    <a id="gvCustomers_ctl04_lnkButton" href="javascript:__doPostBack('gvCustomers$ctl04$lnkButton','')"></a>
                </td>

    </tr><tr>
        <td colspan="6"><table border="0">
            <tr>
                <td><span>1</span></td><td><a href="javascript:__doPostBack('gvCustomers','Page$2')">2</a></td>
            </tr>
        </table></td>
    </tr>
</table>

This is a test div

    <input type="submit" name="Button1" value="Button" id="Button1" />
</div>
<div id="divTag" style="display: none">
    Just for testing</div>

//

Thanks, Ali

Answer 2

Looking at the script below your link is not clicked because the window.location is set. Reading what the blog post is say you either set the window.location or use $(this).find("a").click(); but not both.

<script type="text/javascript">
    var selected = null;
    $(document).ready(function(){
        $("#gvCustomers").find("tr").click(function(){
            $(selected).removeClass("selected"); $(this).addClass("selected"); selected = this;
        });
        $("#gvCustomers").find("tr").dblclick(function(){
            var Id = $(this).find("td:nth-child(1)").text();
            //window.location = "/CustomersVehiclesWebSite/Default2.aspx?record=" + $(this).find("td:nth-child(1)").text();
            $(this).find("a").click();
        });
     });
     function doPostBack(element) {
     tb_remove();
     setTimeout('__doPostBack(\'' + element.name + '\',\'\')', 500);// 500ms given to thickBox to remove itself
     }
</script>

Answer 3

try--- $("[id$='lnkButton']")

Thanks.