Form validation clears JavaScript field

Question

I am using a SEAM based JSF web application. I have a simple form that includes a lookup (pop up window) that retrieves a Category name and ID (both are retrieved with no issues and are stored in myView). When the look up returns, the Category name is used to populate "selectedCategoryName" (using Jquery).

The issue comes when you try to submit the form, and another field fails validation (simple required field missing). All of my other fields remain unchanged, but selectedCategoryName is cleared (even though the bean still has it's value, so fixing the validation error and resubmitting resolves to a proper submit). So my question is, how can I maintain showing the value that's in "selectedCategoryName" when the form validation fails?

Thanks in advance!

<s:decorate id="selectedCategoryField" template="/layout/edit.xhtml">
<span>
    <h:panelGroup rendered="#{! myView.persisted}">
    <img class="lookup" src="${request.contextPath}/images/lookup.gif" width="15" height="14" alt="" 
                        title="Category Lookup" 
                        onclick="return openNewWindow('${CategoryLookupUrl}?#{myView.lookupParameters}', 'id');"/>
    </h:panelGroup>

            <h:inputText id="selectedCategoryName" required="true" 
                        value="#{myView.selectedCategoryName}" 
                        size="50" 
                        readonly="true">

            <a:support event="onchanged" reRender="selectedCategoryField" ajaxSingle="true"/>
    <a:support event="oninputchange" reRender="selectedCategoryField" ajaxSingle="true"/>
            </h:inputText>
    </span>

score 2 · Accepted Answer · edited May 23 '17 at 10:32

The problem is, that actually the bean does not hold the selected value because of readonly="true". When you apply that property to an UIInput the UIInput will not be processed on a submit.

To fix this you can do the following:
If you use JSF2 you can use readonly="#{facesContext.renderResponse}" instead.
If not, define a method isReadonly on your backing bean and use readonly="#{myView.isReadonly}".

public boolean isReadonly() {
    return FacesContext.getCurrentInstance().getRenderResponse();
}

Have a look at the following similiar question and especially the answer for more details on why this works: Data in <h:inputText readonly="true"> disappears when command button is clicked

Form validation clears JavaScript field

1 Answers1