0

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
  • 2
    If your component has the `rendered` attribute set to false, you can't update it later. You should wrap your `` inside another UI component (like ``) and rerender the container. – Luiggi Mendoza Sep 20 '12 at 14:54
  • I tested your proposal - it's not working. I will make it more simple. How I can rewrite the source code so when I select the rows from the `h:selectOnemenu` AJAX call updates the number of rows? – Peter Penzov Sep 20 '12 at 16:03

1 Answers1

3

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>
Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I updated the code it works now. Thank you! May I ask you one more thing: I want when I select number from the `h:selectOneMenu` to update the table rows. Using the original code how I can update the code? – Peter Penzov Sep 21 '12 at 09:39
  • Just set/add its client ID in ``. You can if necessary execute a bean method beforehand by ``. – BalusC Sep 21 '12 at 10:44
  • Hi BalusC, I am following your suggestion with and both of them has disabled attribute bound to getter boolean methods. I noticed this behavior only in IE 9 but works on other browsers like IE8 and latest versions of FireFox, Chrome and Safari. Can you help me to find the problem. – Hussain Ashruf Jan 08 '13 at 02:19
  • I took a notice in IE9 I render (for selectOneMenu) at higher level id for and it works, but doesn't work with two inputText box ids. – Hussain Ashruf Jan 09 '13 at 20:01