Finding sender with JavaScript

Question

I am trying to find out which button in a GridView is calling a JavaScript function by figuring out which row it is in. I am using ASP.NET. Here is the necessary code:

The JavaScript function (only the important part):

function get_notes(sender) {
    //...
    var grid = document.getElementById('<%= PartGrid.ClientID %>');
    var r = 1;
    for (var i = 1; i < grid.rows.length; ++i) {
        if (grid.rows[i].cells[4] == sender) {  //the button is in cells[4]
            r = i;
        }
    }
    alert(r);  //always shows me "1"
    //...
}

The button that calls get_notes (it's in PartGrid, column 4, in a template field):

<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="false" Text="Show" 
    OnClientClick="get_notes(this); return false;" />

I need to find the row for the button that was clicked because I need to use grid.rows[r].cells[0].innerText for an ActiveXObject SQL query. I know that the ActiveXObject and SQL query stuff works, I have already tested that out with dummy values. What is wrong with this code, and is there a better way to find the row of the button that I clicked?

Have you stepped through this in the debugger? Can we see some of the generated HTML source for the button and its surroundings? — Justin Morgan - On strike, Jun 17 '13 at 18:03
Use "debugger;" and inspect the values - are they as expected? — user2246674, Jun 17 '13 at 18:04
@Diodeus - This question has literally nothing to do with that one. — Justin Morgan - On strike, Jun 17 '13 at 18:24
I used the debugger; the generated code and values for my variables were all as expected. Additionally, I found a solution when looking at the values of my variables and their members. It may not be the most graceful solution, but it works for me. I compare a piece of `grid.rows[i].cells[4].innerHTML` to `sender.href` because they both contain information about the `javascript:__doPostBack()` function that is called upon click. The parameters for this function are unique to each button in each row, so this solution works for my context. Thank you for the help — wlyles, Jun 17 '13 at 18:30

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Are you sure you know how many rows are in your table? I notice that i starts with an initial value of 1, rather than 0. The first row will be grid.rows[0]. You should also double-check that you have the right cell, and that the <%= PartGrid.ClientID %> line is locating the table correctly.

If those are correct, the function probably doesn't exist yet when the element is rendered. That means the onclick event won't be bound properly. Make sure you define your function in the head of the page, or at least somewhere above the control. Also make sure you do NOT wait for the document.onload event before you define the function. You need it to exist before the page is rendered.

Your basic approach seems fine. It works correctly here: http://jsfiddle.net/LDHn7/

EDIT:

I don't know why I didn't notice this before. The problem is that sender is the a element that represents your LinkButton. You're comparing it to the td that contains it. Depending on the structure of the HTML output (specifically, whether your a is nested inside anything else), you probably want something like this:

if (grid.rows[i].cells[4] == sender.parentNode) {

Demonstration: http://jsfiddle.net/AngH2/

Note that this whole task would be far, far easier if you either put a client-side ID/class on your LinkButton, and/or use jQuery.

I believe I have solved my issue, see my above comment. Although, I'm not sure why my original approach didn't work. I start at `i=1` because `rows[0]` is the header. The cell is correct as well. I believe that `<%= PartGrid.ClientID %>` is working correctly, and the script is in the head. When I was using the debugger, it appeared as if `grid.rows[i].cells[4]` and `sender` are actually different data types, which seems strange to me — wlyles, Jun 17 '13 at 18:41
@wlyles - You comment made me slap my head. I see what the problem is now. See my edit. — Justin Morgan - On strike, Jun 17 '13 at 19:57
Ah, I see. That works! Much cleaner than my other solution, makes more sense if the code needs to be updated later. Thanks for the help! — wlyles, Jun 17 '13 at 20:13

Finding sender with JavaScript

1 Answers1

EDIT: