Показване/скриване на Div с помощта на jquery в richtable

Имам таблица Rich Faces, която има данни, съдържащи се в div. Искам да покажа друг div, когато задържите курсора на мишката над конкретен ред върху реда с богата таблица, за да покажа допълнителни данни, свързани с този запис, и да скрия div, когато преместите курсора на мишката с помощта на jquery. Мога да покажа/скрия div с помощта на jquery. Но проблемът е, че показва/скрива всеки div таг, свързан с всеки от редовете, вместо да показва/скрива div на определен ред. Как да се уверя, че само редът, който премествам с мишката, показва само тага div, свързан с него?

Ето кодовия фрагмент:

<s:div style="float:left; ">
  <rich:dataTable id="pendingOptyTbl" value="#{searchResultList}"
    var="item" style="border: none; float: left;width:100%;">  
      <rich:column style="border: none;">
          <s:div style="position:relative;height: 35px;">
            <s:div style="float:left; width: 700px; " >
               <a4j:outputPanel style="width: 700px;" onmouseout="jQuery('accountDetails').hide();"   onmouseover="jQuery('.accountDetails').show();">
                    <s:div>
                           <h:outputText value="#{searchController.getCapitalizeName(item.label)} : " >
                    </s:div>
               </a4j:outputPanel>
            </s:div>
        <s:div  style="float:left;top:-10px;right:80px; width:360px;position:absolute;" styleClass="searchDetailsClass">
                <a4j:outputPanel id="searchDetails" ajaxRendered="true" styleClass="accountDetails">


jquery jsf xhtml richfaces
person user1555524    schedule 29.11.2012    source източник
comment
Опитах да направя по този начин...livedemo.exadel.com/richfaces-demo/ richfaces/jQuery.jsf ... но изглежда не работи ... всякаква помощ ще бъде оценена...   -  person user1555524    schedule 30.11.2012

Отговори (2)


arrow_upward
0
arrow_downward

Може би не е най-доброто решение, но можете да опитате jQuery id селектор с индекс на ред:

<h:form id="form">
    <rich:dataTable id="table" rowKeyVar="idx" ...>
        <rich:column>
        ...
            <a4j:outputPanel onmouseover="jQuery('#form\\:table\\:#{idx}\\:searchDetails').show();"
                onmouseout="jQuery('#form\\:table\\:#{idx}\\:searchDetails').hide();">

Можете да разберете получения идентификатор на <a4j:outputPanel id="searchDetails"> с Firebug.

person Vladimir M.    schedule 30.11.2012

arrow_upward
0
arrow_downward

Така че разреших това, използвайки подобен начин на отговора от Владимир, но вместо id го направих със StyleClass. Добавих styleClass="detail-#{idx}" и потърсих с помощта на onmouseover="jQuery('.detail-#{idx}').show();". Това ще търси елемента, използвайки клас стил на div. Всеки div ще има различен styleclass, тъй като има индекс на ред, свързан с него. Надявам се това да помогне на някого в бъдеще. FYI: Използването на Id, както е описано от Владимир, не работи за мен.

person user1555524    schedule 04.12.2012