Primefaces : Data table clear / reset the row data does not work

Question

I am trying to Clear the input data inside data table row using java script.

Here is my jsf code.

<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>

Here is my java script to do clear/reset the data.

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;  
}

The issue is, when I put the expenseOccurredDate and click on Clear button on the UI the value disappears. But when I click on Save as Draft/ Submit button the expenseOccurredDate re appears. Need to click on the Clear button multiple times to work properly. What is the root cause of this issue? How do I resolve this issue?

Here is screenshot after click on Clear button.

I Need to click on clear button twice to work properly.

I am using Primefaces 5.2

Answer 1

How do I resolve this issue?

I have used widgetVar for the selectOneMenu.

<p:selectOneMenu value="#{line.activityId}"
                            widgetVar="activityId_#{row}"
                            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:selectOneMenu value="#{line.expenseType}" id="expenseType1"
                            widgetVar="expenseType_#{row}"
                            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>

In the js I have added :

PF('activityId_'+rowIndex).refresh();
PF('expenseType_'+rowIndex).refresh();

Now it looks to be working as expected.