2012-04-04 6 views
0

コードが示すように、いくつかのネストされたテーブルがあります。ユーザーがチェックボックスをクリックすると、ajax呼び出しがサーバーに送信され、クライアントに返されます。サーバー内のプロセスが正常に動作している場合、クリックされた操作行はjqueryを使用してコールバックを取得するとhtmlコードから削除されます。ユーザーが同じ操作表の内の別の行を削除しようとすると、サーバーに送信される値はNOTになります。 呼び出しは次の行の値を送信します。#{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> 

ありがとう!

REEDIT:HにselectBooleanCheckbox:私は時間を変更

のcommandButton。

ビュー:

      <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関数を使用してください。

は、まず、私は生のHTMLテーブルの代わりにdatatableを使用してお勧めしますthe answer to this question

+0

いいえ、それが原因ではありません。上記の私の応答を確認してください。ありがとう! @eljunior – bribon

2

を参照してください。 Datatableは同様のhtmlを生成しますが、サーバーコンポーネントツリーにアクセスできるという利点があります。

あなたは本当に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を使用していないのに優れているだけ他のオプションよりも、それ以上に高価DataTableのない再レンダリングん実現しますがthis linkが役立ちます。

+0

私はいくつかの変更を行い、アニメーションを使用しているため、jqueryを使用しています。問題は、サーバー側の要素を削除するときです.HTMLを削除すると、その要素は削除されません。私は今日それについて気づいた。問題は、私がテーブル操作から1つの操作を削除するときです。私はコードを改訂しました。あなたの考えを教えてください。ところで、あなたのコメントは役に立ちます、ありがとう! @Shahzeb – bribon