Highlight on click and .live()

bgardner

I recently did some consolidating of multiple HTML pages, and so my DataTable is loaded after the initial page (and jQuery) load. Previously I had a simple click() function which highlighted the currently selected row that was working just fine. However, the selector for the table isn't in the DOM at document.ready, so I wrapped my click function in a live() method as follows:

[code]
$("#request-table tbody tr").live("click", function(event){

// clear any previous select highlighting, and highlight selected
$(oTable.fnSettings().aoData).each(function(){
$(this.nTr).removeClass('selected-row');
});

$(event.target).parent().addClass('selected-row');

});

CSS:
tr.selected-row {
background-color: '#DCBCCF';
}
[/code]

Now, after that there is lots and lots of other stuff that this click method does, Ajax, populating other things, etc. and these are all working fine as before. I can even see that the tr has the class selected-row (when I peek at it in XRay), but the highlighting never occurs. I don't remove the .odd or .even classes, since I want the nice zebra-striping when I select another row (and remove the selected-row class on the previous).

It's as if adding that class is happening, but the background color is being overridden by tr.odd and tr.even. Is there another selector I should use to get the highlighting to occur? Is there a better way to do all of this?

Thanks!

Brian

Jens Gutzeit

Do the CSS this way:
[code]tr.even.selected-row, tr.odd.selected-row {
/* css stuff as usual */
...
[/code]

bgardner

Jens,

Thanks for the suggestion, but alas, it is still having no effect. It behaves differently when the jquery is in a live() method for some reason, or I'm doing something else wrong (entirely possible).

Brian

allan

Hi Brian,

AND logic for CSS can be a little tricky to get right. Possibly the easiest way tog et what you are looking for is to use the "!important" keyword for the background colour when highlighted. Note through that this won't work in IE6 - so if this is important to you, I think it's a case of messing around with the CSS selectors, for example tr.selected-row.even might work...

Regards,
Allan

bgardner

Allan,

We do have to support IE6, at least for the next several months (this is an internal web site to our company, and we have users with IE6, IE7, and a handful of Firefoxers). I have used just about every combination of selected-row and even though the element seems to have that class, the background-color doesn't happen.

I want to keep the even/odd zebra-striping on unselected rows, but since the user needs to see which row he has selected (for each row chosen there is another panel on the screen with the details of that row), I need some way of highlighting that choice by click (unlike the hover example). Hovering won't do because for each selected row there is an accordion widget with several boxes of information, and different call-to-action buttons that represent choices for that particular row. Moving off on a hover would mess that up.

Is there another way to do the highlighting I'm attempting?

Brian

allan

Hi Brian,

With IE6 support it gets a little tricker... Boolean AND isn't well supported in IE6 (they say it is, but it's possibly the buggiest part of IE6's CSS support...). So you might need to take a slightly different approach. A very simple way to do it would be to apply the row_selected class to the TD elements, then you can have a selector like tr.odd td.row_selected {}. The only downside would be the few more lines of code needed to do this :-)

Another method might be to not use the row_selected class, but rather go on the odd/even class, and set the background colour in Javascript. But personally I think I prefer the TD solution.

Hope this helps,
Allan

bgardner

Allan,

Here is what I ended up with, though it does slow selection significantly, especially where there are a lot of rows in the DataTable:

[code]
$("#request-table tbody tr").live("click", function(event){

$(oTable.fnSettings().aoData).each(function(){
$(this.nTr).find("td").removeClass('row_selected');
});

$(event.target).parent().find("td").addClass('row_selected');

});
[/code]

At any given point in time there are no more than 10 rows visible, though there could be 500 rows that you don't see. When I loop through to remove the row_selected class from previously selected td's, is there a way to just do the ones that are on the screen? I'm willing to take the chance that something doesn't get cleared on a previously visible (but no longer visible) row (due to scrolling), in order to speed this little fella up.

By the way, thanks for all your help, and have a Happy New Year!

Brian

allan

Hi Brian,

Am I right in saying that you want only one two to be selected at a time (hence the removeClass on everything else)?

In which can, I think you can make it significantly faster by letting jQuery and the browser to all the hard work:

[code]
$("#request-table tbody tr").live("click", function(event){
$("tr td.row_selected", oTable.fnGetNodes()).removeClass('row_selected');
$(event.target).parent().find("td").addClass('row_selected');
});
[/code]
Hope that works okay... :-)

Also - happy new year to you as well!

Regards,
Allan

bgardner

Allan,

When I use the code above, the selected row gets applied, but the old row does not get the highlight removed. Is that the right selector on the removeClass() ?

Brian

allan

Oops - no it's not. It should be:

[code]
$("#request-table tbody tr").live("click", function(event){
$("td.row_selected", oTable.fnGetNodes()).removeClass('row_selected');
$(event.target).parent().find("td").addClass('row_selected');
});
[/code]
since the fnGetNodes returns an array of TR elements - there are no TR child elements to select... Sorry about that.

Regards,
Allan

bgardner

That's better. If I had more jQuery experience I probably could have figured that out for myself, and I appreciate your assistance, Allan.

Brian