CODEWITHSUNDEEP
ajaxjsfjsf-2
Peter Penzov
Peter Penzov

Reputation: 1668

h:inputText is not ajax-rendered on change of h:selectOneMenu

I have this code which is used to select how many rows to display in jsf table:

<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{AccountsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{AccountsController.pageFirst}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>&nbsp;
<h:message for="rowsPerPage" errorStyle="color: red;" />

I want to edit the code this way: I want to replace the code with h:selectOneManu and option to insert custom value with AJAX support:

<h:selectOneMenu id="setrows" value="#{AccountsController.rowsPerPage}" converter="javax.faces.Integer" maxlength="3">                                    
    <f:selectItem itemValue="10" itemLabel="10" />
    <f:selectItem itemValue="50" itemLabel="50" />
    <f:selectItem itemValue="100" itemLabel="100" />
    <f:selectItem itemValue="500" itemLabel="500" />                                    
    <f:selectItem itemValue="332" itemLabel="Custom" />
    <f:ajax render="customrowperpage" />
</h:selectOneMenu>&nbsp;
<h:inputText id="customrowperpage" value="#{AccountsController.rowsPerPage}" rendered="#{AccountsController.rowsPerPage == '332'}" required="true" />

But for some reason the code is not working. Can you help me to find the problem. Also I want to update AJAX functionality when I select number from the h:selectOneMenu list AJAX call to update the form.

Upvotes: 0

Views: 3849

Answers (1)

BalusC
BalusC

Reputation: 1108642

There are 2 problems.

First, as JavaScript runs in the client side, you can't ajax-update a JSF component which isn't rendered to the client side. There's then simply nothing in the HTML DOM tree which JavaScript can select, manipulate and replace. You should instead ajax-update a JSF component which is always rendered to the client side.

<h:panelGroup id="customrowperpage">
    <h:inputText value="#{AccountsController.rowsPerPage}" required="true" 
        rendered="#{AccountsController.rowsPerPage == '332'}" />
</h:panelGroup>

See also Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

Second, an Integer never equals a String. You're in the rendered attribute testing Integer rowsPerPage against String '332'. Remove those singlequotes to make it a fullworthy number.

<h:panelGroup id="customrowperpage">
    <h:inputText value="#{AccountsController.rowsPerPage}" required="true" 
        rendered="#{AccountsController.rowsPerPage == 332}" />
</h:panelGroup>

Upvotes: 3

Related Questions