OnMouseOver для отображения изображения внутри каждой строки p: dataTable

Question

У меня есть p: dataTable, и я хочу создать и сделать так, чтобы при наведении курсора мыши на строку появлялось изображение delete, позволяющее удалить эту строку. Я использую PrimeFaces.escapeClientId, чтобы преобразовать jsf Id в id, который jQuery понимает. Вот что я получил до сих пор

<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>

К сожалению, это не работает. Firebug вернет без ошибок. пожалуйста помогите пожалуйста

Answer 1

Непосредственная проблема заключается в том, что вы не ставили кавычки вокруг "deleteButton" - поэтому javascript подумал, что это имя переменной, а не строковый литерал.

Вы можете легко пропустить весь бизнес id и просто показать, например, «все div-ы внутри текущего элемента», передав this в качестве контекста jQuery:

<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>

onmouseover также должен работать на столбце p:

Answer 2

Используйте onmouseenter и onmouseleave вместо onmouseover и onmouseout, чтобы избежать мигания, вызванного всплеском события

, например

<div onmouseenter="jQuery('span', this).fadeIn()" 
     onmouseleave="jQuery('span', this).fadeOut()">
     ...
</div>