2012-04-04 3 views
0

코드가 표시 될 때 중첩 테이블을 몇 개 있습니다. 사용자가 체크 박스를 클릭하면 서버로 ajax 호출이 전송 된 다음 클라이언트로 다시 전달됩니다. 서버의 프로세스가 올바르게 작동하면 클릭 된 작업 행은 콜백을받을 때 jquery를 사용하여 html 코드에서 제거됩니다. 그런 다음 사용자가 동일한 작업 테이블에서 다른 행을 삭제하려고하면 서버에 전송되는 값은 이 아니며입니다. 호출은 다음 행 값을 전송합니다. # {trade.murexId}, # {operation.id} 및 # {operation.operation}이지만 은 올바른 번호가 아닙니다.이 올바른 것입니다. Javascript 및 jquery 콜백 함수가 제대로 작동하고 있습니다. Mojarra의 마지막 버전을 사용하고 있습니다. 왜 이런 일이 일어 났습니까? 어떻게 해결할 수 있습니까?JSF 2. h : selectBooleanCheckbox. 예기치 않은 동작

HTML : 사전에

<table id="trades"> 
     <th class="image_cell"></th> 
     <th>Murex Id</th> 
     <th>Type</th> 
     <th>Portfolio</th> 
     <th>Log</th> 
      <ui:repeat var="trade" value="#{controller.errorTrades}"> 
       <h:form> 
        <tr class="trade error"> 

          <td class="image_cell error"><h:graphicImage styleClass="expandable" url="resources/images/plus.png"></h:graphicImage></td> 
          <td id="murex_id" class="error">#{trade.murexId}</td> 
          <td id="type" class="error">#{trade.type}</td> 
          <td class="error">#{trade.portfolio}</td> 
          <td class="error"> 
           <h:commandButton image="resources/images/log_big.jpg" action="#{controller.onLogTrade(trade.murexId)}"> 
            <f:ajax render="log_big" /> 
           </h:commandButton> 
           <h:panelGroup id="log_big"> 
            <h:outputScript rendered="#{not empty controller.result}"> 
             onLogProcess("#{controller.result}"); 
            </h:outputScript> 
           </h:panelGroup> 
          </td> 
        </tr> 
        <tr class="operations"> 
         <td id="#{trade.murexId}" class="operation_row" colspan="5"> 
          <table id="operations"> 
           <tr class="header"> 
            <th class="empty_cell"></th> 
            <th class="operation_cell">Operation</th> 
            <th>Murex Status</th> 
            <th>GBO Status</th> 
            <th>GBO Id</th> 
            <th>OPICS Id</th> 
            <th>Time Transaction</th> 
            <th>Comment</th> 
            <th id="delete">Delete</th> 
            <th>Log</th> 
           </tr> 
           <ui:repeat var="operation" value="#{trade.operationsSortDescList}" varStatus="status"> 
            <tr class="operation"> 
             <th class="empty_cell"></th> 
             <td id="operation" class="operation_cell color">#{operation.operation}</td> 
             <td class="color">#{operation.statusMurex}</td> 
             <td id="status_gbo" class="color">#{operation.statusGbo}</td> 
             <td id="gbo_id" class="color">#{operation.gboId}</td> 
             <td id="opics_id" class="color">#{operation.opicsId}</td> 
             <td class="color">#{operation.datetimeToString}</td> 
             <td class="color">#{operation.coment}</td> 
             <td class="color checkbox"> 
              <h:selectBooleanCheckbox> 
               <f:ajax execute="@form" event="click" listener="#{controller.onDelete}" onevent="onDeleteProcess" /> 
               <f:attribute name="murexId" value="#{trade.murexId}" /> 
               <f:attribute name="operationId" value="#{operation.id}" /> 
               <f:attribute name="operation" value="#{operation.operation}" /> 
              </h:selectBooleanCheckbox> 
             </td> 
             <td class="color log"> 
              <h:commandButton image="resources/images/log_small.jpg" action="#{controller.onLogOperation(operation)}"> 
               <f:ajax execute="@form" render="small_log" /> 
              </h:commandButton> 
              <h:panelGroup id="small_log"> 
               <h:outputScript rendered="#{not empty controller.result}"> 
                onLogProcess("#{controller.result}"); 
               </h:outputScript> 
              </h:panelGroup> 
             </td> 
            </tr> 
           </ui:repeat> 
          </table> 
         </td> 
        </tr> 
       </h:form> 
      </ui:repeat> 
    </table> 

감사합니다!

재 편집 : 시간에 selectBooleanCheckbox : 내가 시간을 변경

있는 명령.

보기 :

      <table id="operations"> 
           <tr class="header"> 
            <th class="empty_cell"></th> 
            <th class="operation_cell">Operation</th> 
            <th>Murex Status</th> 
            <th>GBO Status</th> 
            <th>GBO Id</th> 
            <th>OPICS Id</th> 
            <th>Time Transaction</th> 
            <th>Comment</th> 
            <th id="delete">Delete</th> 
            <th>Log</th> 
           </tr> 
           <ui:repeat var="operation" value="#{trade.operationsSortDescList}" varStatus="status"> 
            <tr class="operation"> 
             <th class="empty_cell"></th> 
             <td id="operation" class="operation_cell color">#{operation.operation}</td> 
             <td class="color">#{operation.statusMurex}</td> 
             <td id="status_gbo" class="color">#{operation.statusGbo}</td> 
             <td id="gbo_id" class="color">#{operation.gboId}</td> 
             <td id="opics_id" class="color">#{operation.opicsId}</td> 
             <td class="color">#{operation.datetimeToString}</td> 
             <td class="color">#{operation.coment}</td> 
             <td class="color checkbox"> 
              <h:commandButton image="resources/images/log_small.jpg" action="#{controller.onDelete(operation)}"> 
               <f:ajax execute="@form" render="small_log" onevent="onDeleteProcess" /> 
              </h:commandButton> 
             </td> 
             <td class="color log"> 
              <h:commandButton image="resources/images/log_small.jpg" action="#{controller.onLogOperation(operation)}"> 
               <f:ajax execute="@form" render="small_log" /> 
              </h:commandButton> 
              <h:panelGroup id="small_log"> 
               <h:outputScript rendered="#{not empty controller.result}"> 
                onLogProcess("#{controller.result}"); 
               </h:outputScript> 
              </h:panelGroup> 
             </td> 
            </tr> 
           </ui:repeat> 
          </table> 

컨트롤러 : 나는 작업을 삭제하면

public void onDelete(Operation operation) 
{ 
    Trade trade = operation.getTrade(); 
    Boolean result = false; 

try { 
    if (trade.getOperations().size() == 1) { 
     result = Modelo.deleteTrade(trade); 
     if (result) 
      this.trades.remove(trade); 
    } else { 
     result = Modelo.deleteOperation(operation); 
     if (result) 
      trade.getOperations().remove(operation); 
    }   
} catch(Exception ex) { 
    ConfigUtil.LOGGER.error(ex); 
}  

}

, 그것이 문제입니다. jquery 때문에 안돼. 나는 그것을 테스트했기 때문에 그것에 대해 확신합니다. 작업을 삭제하고 다음 작업을 클릭하면 서버에 잘못된 작업이 전송됩니다. 왜 이런 일이 일어나는 지 아십니까?

감사합니다.

답변

0

아마도 서버 측에서 알지 못하는 채로 요소를 변경하기 때문일 수 있습니다. DOM을 변경하는 데 JQuery를 직접 사용하지 말고 renderrerender 속성을 사용하여 JSF2 Ajax funcionalities를 사용하십시오.

the answer to this question

+0

아니요, 그 때문이 아닙니다. 위 내 응답을 확인하십시오. 감사! @eljunior – bribon

2

은 첫째로 내가 대신 원시 HTML 테이블의 datatable을 사용하여 권 해드립니다 것이다 참조하십시오. Datatable은 비슷한 html을 생성하지만 benifit은 서버 구성 요소 트리에 액세스 할 수 있다는 것입니다.

당신은 정말 jQuery를 사용할 필요가 없습니다하지만

<table id="trades"> 

<table id="trades" jsfc="h:dataTable binding="#{controller.dataTable}"> 

h 가정을 수행해야하지만 만약이 경우 이용 변화에 당신이 그것을 사용할 수 있기 때문에 난 그냥이에 떠나 JSF html 태그 lib에 대한 네임 스페이스 참조입니다.

controller 이음새가되는 관리 Bean에 private javax.faces.component.html.HtmlDataTable dataTable ;을 선언하십시오.

listener="#{controller.onDelete}"에 대한 코드에서 돌아 오기 전에 서버 측에서 제거해야합니다.



당신은 수도 .. 그것을 해키 보인다 않고 당신이 jQuery을 사용하지 않는 더 나은 단지 다른 옵션보다 더 비싼 데이터 테이블하지 다시 렌더링 않는 달성 할 수 있지만 this link 도움이된다.

+0

몇 가지 변경 작업을 수행하고 애니메이션을 사용하기 때문에 jquery를 사용하고 있습니다. 문제는 내가 HTML을 제거 할 때 서버 측 요소를 삭제할 때입니다. 나는 오늘 그것에 대해 깨달았다. 문제는 테이블 작업에서 하나의 작업을 삭제할 때입니다. 나는 코드를 재 편집했다. 당신의 생각을 알려주세요. 그건 그렇고, 당신의 의견은 유용합니다, 감사합니다! @Shahzeb – bribon