Forum: Ruby on Rails Hotlinking an entire row in an HTML table

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Dave Davidson (Guest)
on 2006-01-15 03:28
(Received via mailing list)
Hi,

This seems simple but I cant get it to work... I have a table with
4 or 5 columns and 20-30 rows.  I'd like to have the ability to click
anywhere in a particular row to fire an action, such as bringing up
a "Details" page for the clicked row.  This would eliminate the need
to generate a "Details" link at the end of every row, which is what I
have now and looks clunky. Ideally when the mouse hovers over a
row, it highlights it a different color to provide feedback, but for
now that really not an issue.

Any insights into the best way of doing this?  I'm thinking it would
be a JS solution, but I'm not really familiar enough with it to know
which angle to attack it from.

Thanks
Kevin O. (Guest)
on 2006-01-15 03:45
Yeah, sounds like a JS solution to me too.

A couple of things you can do...

* When you generate a row, link the contents of the row to the 'show'
action.  Then you just have to click on the rendered data to see more
details.

* add a "title" => "sometext" to your link, or the td element.  That
will show an infotip popup with "sometext".

* you might be able to get the row to highlight using the :hover CSS
option.

* To make it possible to click anywhere in the row, you probably need to
use an 'onclick' handler in JS.

_Kevin
Wai T. (Guest)
on 2007-03-02 21:01
Kevin O. wrote:
> Yeah, sounds like a JS solution to me too.
>
> A couple of things you can do...
>
> * When you generate a row, link the contents of the row to the 'show'
> action.  Then you just have to click on the rendered data to see more
> details.

That wouldn't work the row have text in it.  Is it possible to link the
"white" part of the row as well?

> * you might be able to get the row to highlight using the :hover CSS
> option.

It cannot highlight the entire row, only the text on that column.

> * To make it possible to click anywhere in the row, you probably need to
> use an 'onclick' handler in JS.
>
> _Kevin

I don't think onclick handler can be binded to table's row or TR.

I would be very interested to know how you can highlight a row in a
table.  It seem impossible as far as I can tell.
Jason R. (Guest)
on 2007-03-02 21:14
(Received via mailing list)
No, you can't put any styling on <tr> that will highlight the entire
row. I
guess you'll want to do some Javascript/CSS magic to run through the
<td>'s
of the <tr> setting their background color to the highlight color.
Something
like (with Prototype, of course):

$$('tr.highlight td').each(function (element) {
element.setStyle({background-color:
'#f3f3f3'}) });

Jason
Jodi S. (Guest)
on 2007-03-02 21:38
(Received via mailing list)
Wai, I tend to solve this with a tr mouse events:

   onmouseover="this.className='selected'"
onmouseout="this.className='<%= row_class %>'"

as for clicks, I've found you have to do an onclick on the td - which
seems to work pretty well - you'll just have the same onclick JS
logic for every column.

Jodi
Wai T. (Guest)
on 2007-03-03 05:07
Jodi S. wrote:
> Wai, I tend to solve this with a tr mouse events:
>
>    onmouseover="this.className='selected'"
> onmouseout="this.className='<%= row_class %>'"
>
> as for clicks, I've found you have to do an onclick on the td - which
> seems to work pretty well - you'll just have the same onclick JS
> logic for every column.
>
> Jodi

Hmm... I am not very good with javascript.  Is it even possible to have
onmouseover event for table cells?  I thought they only works for form
tags (such as text field).  Could you give me a simple example?  Thank
you.
Wai T. (Guest)
on 2007-03-03 05:54
Wai T. wrote:
> Jodi S. wrote:
>> Wai, I tend to solve this with a tr mouse events:
>>
>>    onmouseover="this.className='selected'"
>> onmouseout="this.className='<%= row_class %>'"
>>
>> as for clicks, I've found you have to do an onclick on the td - which
>> seems to work pretty well - you'll just have the same onclick JS
>> logic for every column.
>>
>> Jodi
>
> Hmm... I am not very good with javascript.  Is it even possible to have
> onmouseover event for table cells?  I thought they only works for form
> tags (such as text field).  Could you give me a simple example?  Thank
> you.

Actually, after some researching, I found that it is possible to have
onmouseover events for TR cells.  Now, the problem is how to do that
elegantly (with AJAX?) to pass parameters back to the controller.

My idea would be to have a hidden text fields or check box for each
table row, that will get toggled.  But storing the values in hidden text
fields seems like a hack.  Does anyone have a better idea?
Jodi S. (Guest)
on 2007-03-03 19:17
(Received via mailing list)
On 2-Mar-07, at 10:54 PM, Wai T. wrote:

>>> seems to work pretty well - you'll just have the same onclick JS
>> you.
>
> Actually, after some researching, I found that it is possible to have
> onmouseover events for TR cells.  Now, the problem is how to do that
> elegantly (with AJAX?) to pass parameters back to the controller.
>
> My idea would be to have a hidden text fields or check box for each
> table row, that will get toggled.  But storing the values in hidden
> text
> fields seems like a hack.  Does anyone have a better idea?

Wai,

    <tr class="<%= row_class %>"
onmouseover="this.className='selected'" onmouseout="this.className='<%
= row_class %>'" style="height: 45px;">

the above will handle the highlighting requirement for each row -
where row_class is the 'normal' not highlighted class - and
'selected' is the class for a highlighted row.

erb is assigning a row_class for me, as I want to alternate the
colors for each row. This can be accomplished by iterating over your
detail records and assigning an alternating row class:

  <%
    @work_order_items.each_with_index do |line_item, line_count|
         row_class = line_count%2 == 0 ? "even" : "odd"  #note there is
a helper provided by rails to do this - can't remember the helper name
   %>

as for 'hotlinking' you'll need to have each cell (td) call some
javascript. You haven't said what you want to hotlink, but I can
assume you're thinking of an ajax action - take a look at
remote_function in the api docs, using the (undocumented?) :with
parameter ala:


  <td onclick=<%= remote_function(:update => 'your_row_id', url =>
'your url', :id => @line_item.id  %>"> @line_item.description </td>

that should be enough detail to you get you started. Rails helpers
aren't an excuse for not knowing javascript - you really need to pick
up this skill - plus CSS. Rails (imo) makes it a bit easier to deal
with these topics, but you're inevitably going to find yourself in
circumstances where you're gonna get just plain lost. Use view source
to see what the helpers do for you, and grab [1]firebug to help debug
when things aren't going well.

you're on your own now cowboy - enjoy the ride!
Jodi

[1] http://www.google.ca/url?sa=t&ct=res&cd=1&url=http...
2Faddons.mozilla.org%2Ffirefox%2F1843%
2F&ei=Ra3pRYfhNZX0iAHN24CjBw&usg=__Wnv_futN3OoTeIAOWgVEsUSVydk=&sig2=nv9
Hrc3RmImQuzWGlGjTXw
Tieg (Guest)
on 2007-03-03 22:17
(Received via mailing list)
That helper's called cycle() :

<tr class="<%= cycle("even", "odd") -%>">

What I do is...

 tr.even td { color: your-color; }
 tr.odd td { color: #FFF; }
 tr:hover td { color: hover-color; }

But IE (6 and below, I don't know about 7) doesn't accept pseudo-
selectors on anything but anchor links, so there are javascripts out
there that can attach a class called "hover" to any element when you
hover it. So you could do this in your IE-specific stylesheet
(assuming you've got one)...

tr.hover td { color: hover-color; }

Another thing I've done in the past for cell-specific hovers are
wrapping everything in the <td> inside of an <a> and making the <a> a
block-level element with the height and width of the cell. And I
totally agree with Jodie; Firebug extension is the best thing ever,

Tieg
Wai T. (Guest)
on 2007-03-04 02:05
Jodi S. wrote:

>   <td onclick=<%= remote_function(:update => 'your_row_id', url =>
> 'your url', :id => @line_item.id  %>"> @line_item.description </td>
>
> that should be enough detail to you get you started. Rails helpers
> aren't an excuse for not knowing javascript - you really need to pick
> up this skill - plus CSS. Rails (imo) makes it a bit easier to deal
> with these topics, but you're inevitably going to find yourself in
> circumstances where you're gonna get just plain lost. Use view source
> to see what the helpers do for you, and grab [1]firebug to help debug
> when things aren't going well.

Thank you.  The onclick remote_function is what I am looking for.  I
would need to add items to a container whenever the user clicked on the
row.  This will work perfectly.  Once again, thanks a lot.
This topic is locked and can not be replied to.