1
我想清除使用java腳本的數據錶行內的輸入數據。Primefaces：數據表清除/重置行數據不起作用
這是我的jsf代碼。
<p:dataTable var="line" id="addExpenseDataTable" rowIndexVar="row" value="#{myexpense.form.addExpenseEntryList}">
<p:column styleClass="centerAlignColumn" width="5%">
<p:commandButton id="copy" onclick="copy('#{row}');" partialSubmit="true" ajax="true" title="Copy" icon="ui-icon-copy" rendered="#{row==1 || row==0 }"/>
<p:commandButton id="clear" onclick="clearMe('#{row}');" immediate="true" partialSubmit="true" ajax="true" title="Clear" icon="ui-icon-close"/>
</p:column>
<p:column headerText="#{tk.expense_table_expenseOccurredDate}"
styleClass="centerAlignColumn" width="8%">
<p:calendar id="mask1" value="#{line.expenseOccurredDate}"
required="#{not empty line.amount or not empty line.activityId or not empty line.vatAmount or not empty line.comment or not empty line.expenseType}"
requiredMessage="#{tk.expense_table_mandatory_expenseOccurredDate}"
label="#{tk.expense_table_expenseOccurredDate}"
pattern="#{myexpense.datePattern}" styleClass="expenseDate"
timeZone="#{myexpense.timeZone}" locale="#{localeBean.locale}"
rendered="#{line.editable}"
mindate="#{myexpense.minimumFromDate}"
maxdate="#{myexpense.maxExpenseOccurredDate}">
<f:validator validatorId="dateRangeValidator"></f:validator>
<f:attribute name="localeCode" value="#{localeBean.localeCode}" />
<p:ajax event="dateSelect" oncomplete="document.getElementById('myExpenseForm:addExpenseDataTable:#{row}:mask1_input').focus()"
process="@this" partialSubmit="true"/>
</p:calendar>
</p:column>
<p:column headerText="#{tk.expense_table_activityId}"
styleClass="centerAlignColumn">
<p:selectOneMenu value="#{line.activityId}"
filter="true" filterMatchMode="contains"
required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.vatAmount or not empty line.comment or not empty line.expenseType}"
requiredMessage="#{tk.expense_table_mandatory_activityId}"
rendered="#{line.editable}" id="activityId1">
<f:selectItem itemLabel="#{tk.expense_table_select_activityId}" />
<f:selectItems value="#{myexpense.activityList}" />
<p:ajax process="@this" partialSubmit="true" />
</p:selectOneMenu>
</p:column>
<p:column headerText="#{tk.expense_table_comment}"
styleClass="centerAlignColumn">
<p:inputTextarea rows="2" cols="25" counter="display"
value="#{line.comment}" rendered="#{line.editable}" id="comment1"
maxlength="#{myexpense.maxCommentLength}"
counterTemplate="#{tk.expense_text_area_content_template}"
autoResize="false">
<p:ajax process="@this" partialSubmit="true"/>
</p:inputTextarea>
<h:outputText id="display" />
</p:column>
<p:column headerText="#{tk.expense_table_amount_excl}"
styleClass="centerAlignColumn" width="10%">
<pe:inputNumber id="amountExcl1" value="#{line.amount}"
rendered="#{line.editable}"
required="#{not empty line.expenseOccurredDate or not empty line.vatAmount or not empty line.comment or not empty line.expenseType or not empty line.activityId}"
requiredMessage="#{tk.expense_table_mandatory_amount}">
<p:ajax event="blur" update="amountIncl1"/>
</pe:inputNumber>
</p:column>
<p:column headerText="#{tk.expense_table_vatAmount}"
styleClass="centerAlignColumn" width="10%">
<pe:inputNumber id="vat1" value="#{line.vatAmount}"
rendered="#{line.editable}">
<p:ajax event="blur" update="amountIncl1"/>
</pe:inputNumber>
</p:column>
<p:column headerText="#{tk.expense_table_amount_incl}"
styleClass="rightAlignColumn" width="10%">
<h:outputText id="amountIncl1" value="#{line.amount+line.vatAmount}">
<f:convertNumber pattern="#{myexpense.numberPattern}" locale="#{localeBean.localeCode}"/>
</h:outputText>
<h:outputText escape="false" value=" #{tk.menu_currency_symbol}" />
</p:column>
<p:column headerText="#{tk.expense_table_expenseTypeList}"
styleClass="centerAlignColumn">
<p:selectOneMenu value="#{line.expenseType}" id="expenseType1"
required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.comment or not empty line.vatAmount or not empty line.activityId}"
requiredMessage="#{tk.expense_table_mandatory_expenseType}">
<f:selectItem itemLabel="#{tk.expense_table_select_expenseType}" />
<f:selectItems value="#{applicationController.expenseTypeList}" />
<p:ajax process="@this" partialSubmit="true"/>
</p:selectOneMenu>
</p:column>
<p:column headerText="#{tk.expense_table_statusList}"
styleClass="centerAlignColumn" width="7%">
<h:outputText value="#{line.status}" />
</p:column>
<f:facet name="footer">
<p:commandButton process=":myExpenseForm:lazyDataTable addExpenseDataTable" partialSubmit="true" ajax="true"
value="#{tk.expense_saveAsDraft}" id="xyz"
actionListener="#{myexpense.saveAsDraft}" update=":myExpenseForm:lazyDataTable addExpenseDataTable @form"
rendered="#{myexpense.form.myOnly and myexpense.userIdSearch eq null}" />
<p:commandButton process=":myExpenseForm:lazyDataTable addExpenseDataTable" value="#{tk.expense_submit}" partialSubmit="true" ajax="true"
id="a07" actionListener="#{myexpense.submitNotSavedBody}"
update=":myExpenseForm:lazyDataTable addExpenseDataTable @form :myExpenseForm:selectUser" rendered="#{myexpense.form.myOnly}" />
</f:facet>
</p:dataTable>
這是我的java腳本來清除/重置數據。
function clearMe(rowIndex){
//alert(rowIndex);
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':mask1_input').value = "";
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':comment1').value="";
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':amountExcl1_input').value="";
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':amountExcl1_hinput').value="";
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':vat1_input').value="";
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':vat1_hinput').value="";
var activityIdValue = '';
var expenseTypeValue = '';
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':activityId1_input').value = activityIdValue;
document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':expenseType1_input').value = expenseTypeValue;
}
問題是，當我把費用的日期和時間點擊清除按鈕在UI上的值消失。但是當我點擊另存爲草稿/提交按鈕時，會顯示expenseOccurredDate。需要多次單擊清除按鈕才能正常工作。這個問題的根源是什麼？我該如何解決這個問題？
點擊清除按鈕後顯示截圖。
我需要明確的按鈕，點擊兩次才能正常工作。
我正在使用Primefaces 5.2