JSF按钮动态添加行到表也插入额外的表

时间:2016-04-22 15:37:49

标签: jsf primefaces

我在兼容模式下使用IE11的内部网络上使用Primefaces 5.2。我有一个按钮和一张桌子。当我按下按钮时,我在表格中获得了一个新行,但我也在按钮和表格之间插入了一个空表<table></table>。每按一次按钮就会发生这种情况 - 三次按下三个不需要的空表。

Sanitized JSF源代码如下:

<tr>
   <td>
      <h:outputText value="#{enr['birth.date']}"/>*:
   </td>
   <td>
      <p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
      <p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
   </td>
</tr>
<tr>
   <td>
      <h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
   </td>
   <td>
      <p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
         <f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
      </p:commandButton>
      <h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
         <h:column size="30" maxlength="50">
            <h:inputText value="#{otherNameField.otherName}" tabindex="6">
               <f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
            </h:inputText>
         </h:column>
         <h:column>
            <p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
               <f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
            </p:commandButton>
         </h:column>
      </h:dataTable>
   </td>
</tr>

以下是我在DOM Explorer中看到的生成输出:

<tr>
   <td>
      <button name="dataForm:j_id605621413_2_2c601363" tabindex="5" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:j_id605621413_2_2c601363" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:j_id605621413_2_2c601363',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:&quot;dataForm:j_id605621413_2_2c601363&quot;});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plus"></span><span class="ui-button-text ui-c">ui-button</span></button>
      <table></table> <!-- the unwanted table element -->
      <table id="dataForm:otherNameFields">
         <tbody id="dataForm:otherNameFields:tbody_element">
            <tr><td><input name="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" tabindex="6" id="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" onchange="jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c6013ca',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'change'})" type="text" value=""></td><td><button name="dataForm:otherNameFields:0:j_id605621413_2_2c601007" tabindex="6" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:otherNameFields:0:j_id605621413_2_2c601007" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c601007',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:&quot;dataForm:otherNameFields:0:j_id605621413_2_2c601007&quot;});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-trash"></span><span class="ui-button-text ui-c">ui-button</span></button></td></tr>
</tbody></table>
   </td>
</tr>

任何

0 个答案:

没有答案