Adding a custom attribute in ASP.NET. accessing it in JQuery

Question

I have a table that is created in ASP.NET C# code behind. The table has several levels of groupings, and when I create the rows for the outer most grouping, I add an custom attribute as follows:

foreach (Table2Row row in Table2Data)
{
    // skipping a bunch of irrelevent stuff
    ...
    tr_group.Attributes.Add("RowsToToggle", String.Format(".InnerRowGroupId_{0}", row.GroupHeaderId));
    ...
}

The attribute is the CSS class name of the inner level rows that I would like to toggle. When the user clicks on the outer level row, I would like to call JQuery Toggle function for all inner level rows that match the custom attribute.

To achieve that effect, I have attached an onclick event to the header rows with the following script in the aspx file:

var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
    var table = document.getElementById(tableId);
    var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
    for (i = 0; i < groupRows.length; i++) {
        table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
    }
});

function ToggleOnRowClick(row) {
    var r = $('#' + row.id);
    var innerRows = r.attr('RowsToToggle');
    $(innerRows ).toggle();
}

So, clicking anywhere on the header row should call the function ToggleOnRowClick, which should then toggle the set of rows below it via the custom attribute RowsToToggle.

When I set a (FireBug) break point in the ToggleOnRow function, the variable r appears to be pointing to the correct object. However, innerRows is not getting set but instead remains null. So am I setting the custom attribute incorrectly in ASP.NET or reading in incorrectly in JQuery?

What does the rendered table look like? That's where you'll find your answer. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 17, 2013 at 13:27
Are you sure you don't want to be using the class functions and not the attribute functions? (api.jquery.com/category/manipulation/class-attribute) — Pete
– Pete, Commented Sep 17, 2013 at 13:31
cssClass contains the Class name that was assigned to all of the rows that I'd like to toggle. The row being clicked on is the outer grouping. It contains an inner table. Its the rows of the inner table that I'm trying to toggle. — Steve Wash
– Steve Wash, Commented Sep 17, 2013 at 13:54
Do you actually see the RowsToToggle attribute in the html of the rendered page? — kenttam
– kenttam, Commented Sep 19, 2013 at 17:05

afzalulh · Accepted Answer · 2013-09-22 20:13:40Z

2

+50

You did not post the code to generate inner level rows, I am assuming you sat proper classes to them.

There are few issues with the jquery you posted. This line wouldn't work:

   table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }

You don't have any groupRows property defined for table object.
We don't care about table row anymore, we care about groupRows[i] and want to pass it to ToggleOnRowClick function.
This line in next function is also wrong:var r = $('#' + row.id);

Solution: Change your script to this:

var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
    var table = document.getElementById(tableId);
    var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
    for (i = 0; i < groupRows.length; i++) {
        groupRows[i].onclick = function () { ToggleOnRowClick(this); }
    }
});

function ToggleOnRowClick(row) {
    //var r = $('#' + row.id);
    var innerRows = $(row).attr('RowsToToggle');
    $("." + innerRows).toggle();
}

I have tested the code with dummy data. So if you have any issue, PM me.

edited Sep 22, 2013 at 20:13

answered Sep 22, 2013 at 2:38

afzalulh

7,9432 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zholen Over a year ago

Why have jquery and yet continue to use getElementsByXXX. Could this also be improved by using JQuery on?

afzalulh Over a year ago

@Zholen - good catch! I agree, and I would do it to suggest a new solution. Here I am only fixing OP's code, keeping working portion of his code.

John Wu Over a year ago

I agree this is mostly likely the solution. Google "Javascript hoisting" if it's not clear why.

RobH Over a year ago

This is nothing to do with hoisting... It's a classic event handler in a loop with a closure problem.

John Wu · Accepted Answer · 2013-09-24 22:09:23Z

1

This line is your culprit:

table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i])

By the time the event handler runs, table.rows might still exist, but i will be set to groupRows.length+1, which is out of bounds for the array. The handler will get called with an argument of undefined.

Remember, Javascript is an interpreted language! The expression "table.rows[i]" will get interpeted when the handler runs. It will use the last value of i (which will still be set to the value that caused your for loop to end, groupRows.length+1).

Just use

    table.groupRows[i].onclick = function () { ToggleOnRowClick(this) }

edited Sep 24, 2013 at 22:09

answered Sep 24, 2013 at 21:48

John Wu

52.5k8 gold badges50 silver badges92 bronze badges

Comments

Nick Sharp · Accepted Answer · 2013-09-24 21:43:52Z

So, First you shouldn't use custom attributes... they are a sin!

Please use data attributes instead, so that is what I'm going to use in the code, should be an easy fix regardless.

If this doesn't work then I'd be very very interested in seeing a dumbed down HTML snippet of the actual output.

$(document).ready(function () {

    $('#MYTABLE').on('click', '.Table2GroupHeader', function() {
      var attr_if_you_insist_on_sinning = $(this).attr("RowsToToggle");
      var data_if_you_like_not_sinning = $(this).data("RowsToToggle");
      //if the row is like <tr data-RowsToToggle=".BLAH" or th etc

      //asumming you set the attribute to .BLAH then:
      var rows_to_toggle = $(data_if_you_like_not_sinning);
      rows_to_toggle.toggle();

      //assuming you set it to BLAH then:
      var rows_to_toggle = $("."+ data_if_you_like_not_sinning);
      rows_to_toggle.toggle();
    });

});

Irfan TahirKheli · Accepted Answer · 2013-09-17 13:37:42Z

-1

$(document).ready(function () {

    $('#<%= Table2MainTable.ClientID %> .Table2GroupHeader').each(function(){
        $(this).click(function(){
            $(this).toggle();
        });

    });

});

answered Sep 17, 2013 at 13:37

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

4 Comments

Steve Wash Over a year ago

see my comment above. I'm not trying to Toggle (this). I'm trying to toggle $('.SomeOtherRows'). The custom attribute has the value of '.SomeOtherRows'. For example, on Row 155, it would have the value of '.Table2DataGroup_155' as assigned in the C# code at the top.

Irfan TahirKheli Over a year ago

@SteveWash Why vote down. Just change your code where want to do something different.

Steve Wash Over a year ago

The question is all about the custom attribute. That's where I need the help. You answer doesn't help me in any significant way. Its a little more concise but doesn't address the problem.

Irfan TahirKheli Over a year ago

$(this).toggle(); So change this thing to -> $(this).attr('customAttr','yourvalue');

Collectives™ on Stack Overflow

Adding a custom attribute in ASP.NET. accessing it in JQuery

4 Answers 4

4 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related