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

score 1 · Accepted Answer · answered Feb 03 '12 at 18:28

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

answered Feb 03 '12 at 18:28

BalusC

1,082,665
372
3,610
3,555

i've edited my question with a sample of my pubBacker. This may be a dumb question, but if i've never instantiated my pubBacker bean by calling `Publication pub = new Publication();`, is it right to just say `new Publication()` in my clearEntries method? – Catfish Feb 03 '12 at 20:36
I think you didn't understood me. Look at values of `` components. If you don't want to extract the model from the controller, then just `firstName = lastName = null;` inside the clear method is also okay, but this is cumbersome if you've a lot of them. – BalusC Feb 03 '12 at 20:44
Oh I didn't see the modified inputText before. Since i have a small number of fields, I just set my vars to "", but the thing that I didn't have is `update="@form"` and also if I have a `type` set on the commandButton, it didn't work. – Catfish Feb 03 '12 at 20:55
Don't set them to empty strings, this is a bad form. Yes, those changes are also necessary when you want to let JSF do the job instead of JS, as answered. – BalusC Feb 03 '12 at 20:57

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

1 Answers1