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
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 -- Posted via http://www.ruby-forum.com/.
> * you might be able to get the row to highlight using the :hover CSS > option.In Firefox and Safari, yes, but not in IE, which doesn''t accept the :hover on anything but the <a> tag. You''ll have to add onmouseover/mouseout events to the tr to handle this.> > * To make it possible to click anywhere in the row, you probably > need to > use an ''onclick'' handler in JS.Yes, this would be the only way to make the full row respond to a click.
Matt.C.Wagner@wellsfargo.com
2006-Jan-16 20:59 UTC
[Rails] Hotlinking an entire row in an HTML table
Dave Davidson wrote:> 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.Hi Dave, I solved this by adding the following to every <td> in the row: <td onMouseOver="this.style.cursor=''pointer''" onClick="window.location=''show/<%= foobar[:id] %>''"> Maybe there is a way to make the javascript act on the <tr>, but I wasn''t able to find it easily. Adding this to each <td> works just fine. Matt -- Matt C. Wagner Information Security Analyst Network Intrusion Detection Security Operations Center Corporate Information Security Wells Fargo Bank
To hijack this thread a little, how do you make it so the popup windows sends information back to the main window? Like clicking a link could bring up a specific search popup, user clicks results and those results go back to the main? - Nic. On 1/16/06, Matt.C.Wagner@wellsfargo.com <Matt.C.Wagner@wellsfargo.com> wrote:> Dave Davidson wrote: > > 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. > > Hi Dave, > > I solved this by adding the following to every <td> in the row: > > <td onMouseOver="this.style.cursor=''pointer''" > onClick="window.location=''show/<%= foobar[:id] %>''"> > > Maybe there is a way to make the javascript act on the <tr>, but I > wasn''t able to find it easily. Adding this to each <td> works just fine. > > Matt > > -- > Matt C. Wagner > Information Security Analyst > > Network Intrusion Detection > Security Operations Center > Corporate Information Security > Wells Fargo Bank > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Nic
On 1/16/06, Nic Werner <nicwerner@gmail.com> wrote:> To hijack this thread a little, how do you make it so the popup > windows sends information back to the main window? Like clicking a > link could bring up a specific search popup, user clicks results and > those results go back to the main? > > - Nic. > > > On 1/16/06, Matt.C.Wagner@wellsfargo.com <Matt.C.Wagner@wellsfargo.com> wrote: > > Dave Davidson wrote: > > > 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. > > > > Hi Dave, > > > > I solved this by adding the following to every <td> in the row: > > > > <td onMouseOver="this.style.cursor=''pointer''" > > onClick="window.location=''show/<%= foobar[:id] %>''"> > > > > Maybe there is a way to make the javascript act on the <tr>, but I > > wasn''t able to find it easily. Adding this to each <td> works just fine. > > > > Matt > > > > -- > > Matt C. Wagner > > Information Security Analyst > > > > Network Intrusion Detection > > Security Operations Center > > Corporate Information Security > > Wells Fargo Bank > > > > _______________________________________________ > > Rails mailing list > > Rails@lists.rubyonrails.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > -- > - Nic > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >This looks like a job for Behaviour: http://bennolan.com/behaviour/ -- Kyle Maxwell Chief Technologist E Factor Media // FN Interactive kyle@efactormedia.com 1-866-263-3261
Kevin Olbrich 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. > > _KevinI 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. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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
On 3/2/07, Wai Tsang
<rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org>
wrote:>
>
> Kevin Olbrich 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.
>
> --
> Posted via http://www.ruby-forum.com/.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
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 On 2-Mar-07, at 2:13 PM, Jason Roelofs wrote:> 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 > > On 3/2/07, Wai Tsang <rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote: > > Kevin Olbrich 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. > > -- > Posted via http://www.ruby-forum.com/. > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
Jodi Showers 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. > > JodiHmm... 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. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
Wai Tsang wrote:> Jodi Showers 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? -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
On 2-Mar-07, at 10:54 PM, Wai Tsang wrote:> > Wai Tsang wrote: >> Jodi Showers 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?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=https%3A%2F% 2Faddons.mozilla.org%2Ffirefox%2F1843% 2F&ei=Ra3pRYfhNZX0iAHN24CjBw&usg=__Wnv_futN3OoTeIAOWgVEsUSVydk=&sig2=nv9 Hrc3RmImQuzWGlGjTXw --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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
On Mar 3, 10:16 am, Jodi Showers
<j...-BOB1p6JRLoAV+D8aMU/kSg@public.gmane.org>
wrote:> On 2-Mar-07, at 10:54 PM, Wai Tsang wrote:
>
>
>
>
>
> > Wai Tsang wrote:
> >> Jodi Showers 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?
>
> 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=https%3A%2F%
> 2Faddons.mozilla.org%2Ffirefox%2F1843%
>
2F&ei=Ra3pRYfhNZX0iAHN24CjBw&usg=__Wnv_futN3OoTeIAOWgVEsUSVydk=&sig2=nv9
> Hrc3RmImQuzWGlGjTXw
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
Jodi Showers 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. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---