View could not be restored after clicking button that runs a JS function which clears the form

Question

I'm having an issue with a form that I have. The form allows users to enter info into some textboxes and then there are 2 buttons - Search and Reset.

Form code:

<h:outputText value="Search by Author Name" styleClass="p" />

<div class="investigatorTab">

    <h:outputLabel for="firstName" rendered="true" value="First Name" />
    <h:inputText value="#{pubBacker.firstName}"></h:inputText>

    <h:outputLabel for="lastName" rendered="true" value="Last Name" />
    <h:inputText value="#{pubBacker.lastName}"></h:inputText>

</div>

<div class="buttons">
    <p:commandButton value="Submit" styleClass="submitButton" action="#{pubBacker.submit}" update="tabs" />
    <p:commandButton value="Reset" type="button" actionListener="#{pubBacker.clearEntries}" onclick="clearForm(this.form);" />
</div>

The problem I'm having is that if I click the search button, it takes me to the results page and if I go back to the search page, it still has the data that I searched with in the text fields because the bean is session scoped. I want to be able to click the Reset button and have the data in the text fields clear.

Currently with the code below, if I click the Reset button, The search button no longer works and in the firebug console it gives me this error

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><error><error-name>class javax.faces.application.ViewExpiredException</error-name><error-message><![CDATA[viewId:/ccadmin/pubManagement.xhtml - View /ccadmin/pubManagement.xhtml could not be restored.]]></error-message></error></partial-response>

If I remove the onclick="clearForm(this.form);" from the second p:commandButton, the form works fine.

Any ideas why calling a JS function would make the view expire?

Publication Bean:

@ManagedBean(name="pubBacker")
@SessionScoped
public class Publication {

    public Publication() {}

    public void clearEntries() {
        new Publication();
    }
}

Answer 1

You're apparently clearing all elements of the form by blindly looping through form.elements. This way the javax.faces.ViewState hidden input field which is auto-included by JSF will be cleared as well and hence JSF will retrieve an empty value and it won't be able to find the associated view state in the server side. This will ultimately end up in a ViewExpiredException.

I suggest to just not use JS to clear the form, but only JSF. It's easier if you have a model which represents the form.

<div class="investigatorTab">
    <h:outputLabel for="firstName" rendered="true" value="First Name" />
    <h:inputText value="#{pubBacker.pub.firstName}"></h:inputText>

    <h:outputLabel for="lastName" rendered="true" value="Last Name" />
    <h:inputText value="#{pubBacker.pub.lastName}"></h:inputText>
</div>

<div class="buttons">
    <p:commandButton value="Submit" styleClass="submitButton" action="#{pubBacker.submit}" update="tabs" />
    <p:commandButton value="Reset" action="#{pubBacker.clear}" process="@this" update="@form" />
</div>

(note the process="@this", this won't process the form's input values and thus not validate them)

with

public void clear() {
    pub = new Pub();
}