Adding a custom attribute to ASP.NET. access to it in jquery

Question

I have a table that is created in ASP.NET C # code. The table has several levels of groupings, and when I create rows for the outermost grouping, I add a 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 name of the CSS class for the inner level strings that I would like to switch. When the user clicks on the outer level row, I would like to call the jQuery Toggle function for all the inner level rows that match the user attribute.

To achieve this effect, I attached the onclick event to the header lines 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 title bar should call the ToggleOnRowClick function, which then should switch the rowset below it using the custom RowsToToggle attribute.

When I set a breakpoint (FireBug) in the ToggleOnRow function, the r variable seems to point to the correct object. However, innerRows does not get set, but instead remains null. So am I setting the user attribute incorrectly in ASP.NET or reading it incorrectly in jQuery?

Answer 1

You did not send code to generate internal-level strings, I assume that you have placed the appropriate classes for them.

There are several problems in the jquery you posted. This line does not work:

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

• You do not have the groupRows property set for the table object.
• We no longer need a table row, we care about groupRows [i] and want to pass it to the ToggleOnRowClick function.
• This line in the following function is also incorrect: var r = $('#' + row.id);

Solution: Change the script to the following:

 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 checked the code with dummy data. Therefore, if you have any problems, write to me.

Answer 2

This line is your culprit:

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

By the time the event handler starts, table.rows may still exist, but I will be set to groupRows.length + 1, which is beyond the scope of the array. The handler will be called with the undefined argument.

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

Just use

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

Answer 3

So, first you should not use custom attributes ... they are a sin!

Use data attributes instead, so this is what I'm going to use in the code should be easy to fix independently.

If this does not work, it will be very interesting for me to see a snapshot of the HTML fragment 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(); }); }); 

Answer 4

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