1

I have a p:dataTable and I want to create and effect that when I hover my mouse over a row, a delete image appear to allow me to delete that row. I use PrimeFaces.escapeClientId to convert jsf Id to id that jQuery understand. Here is what I got so far

<p:dataTable value=#{...} var="item">
   <p:column>
       <div onmouseover="jQuery(PrimeFaces.escapeClientId('deleteButton')).fadeIn()">
            <!-- Content of the row -->
            <p:commandButton id="deleteButton" image="delete" style="border: 0; display: none;" 
                              actionListener="#{bean.deleteRow(item)}" />
       </div>
   </p:column>
<p:dataTable>

Unfortunately, it does not work. Firebug return no error. please please help

Thang Pham
  • 38,125
  • 75
  • 201
  • 285
  • Don't know JSF or PrimeFace. And looking at your code it will stay that way. I might be ignorant right now. But what on earth did produce that code??? :P (Sorry bout this very not helpful post :) ) – PeeHaa Dec 30 '10 at 19:17

2 Answers2

1

The immediate problem is that you didn't put quotes around "deleteButton" - so javascript thought it was a variable name, not a string literal.

You can easily skip the whole id business and just show, for example "all the divs inside the current element", by passing this as jQuery context:

<p:column>
 <div onmouseover="jQuery('div', this).fadeIn()">
    to jest div
    <div style="color: wheat; background-color: green; display: none">
      <p:commandButton id="deleteButton" image="delete" style="border: 0" actionListener="#{bean.deleteRow(item)}" />
    </div>
 </div>
</p:column>

The onmouseover should also work on p:column.

fdreger
  • 12,264
  • 1
  • 36
  • 42
  • Thank you very much. I originally do have the quote around `deleteButton`. It just got left out when I type them in. With or without single quote, it still does not work. But your id of take out the id business sound like a good idea. I will try – Thang Pham Dec 31 '10 at 02:53
  • 1
    If I add `onmouseout="jQuery('div', this).fadeOut();"` into the out-most `div`, when I hover, the image flash on and off (2 times). Any idea why? One of more question, the inner-div, I want its `style` be `display:inline`, so it wont create line-break, but I already have `display: none`, they dont seem to like be together, is there a way to make display style to both be `inline` and `none` – Thang Pham Dec 31 '10 at 03:01
  • The original code will not work, even with quotes, because client ids of the button is not "deleteButton" but something like "idofform:idoftable:deletebutton:rowintable" (a:b:deletebutton:45). You CAN get around it, by using "component" implicit variable, but this tends to be messy. – fdreger Dec 31 '10 at 10:54
  • if you want an inline div, just use a :-) (Otherwise, you would need to make your own fadeIn jQuery plugin or see if the current one has any hooks ) – fdreger Dec 31 '10 at 10:56
  • The flash is probably the famous mousein/mouseout bubble problem (it has nothing to do with JSF and all with javascript/css hell; too little space in comments to answer it here). You can read all about the problem: http://stackoverflow.com/questions/1651469/mouseover-and-mouseout-events-firing-on-children (and many more: see related questions). If you still struggle, ask another question, preferably without the JSF stuff (just show the generated HTML), it will get more exposure. – fdreger Dec 31 '10 at 11:35
0

Use onmouseenter and onmouseleave instead of onmouseover and onmouseout to avoid flashing that caused by event bubbling

e.g.

<div onmouseenter="jQuery('span', this).fadeIn()" 
     onmouseleave="jQuery('span', this).fadeOut()">
     ...
</div>
Kin Cheung
  • 870
  • 10
  • 20