We are using JSF 1.2 for our project. Requirement is to update another selectonemenu options based on a value change in the current selectonemenu.
Based on select1 option, select2 needs to be updated.
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" onchange="javascriptMethod()">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
<h:panelGroup id="panel2">
<h:selectOneMenu id="select2" value="#{subscription.subscriptions2}">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
</h:panelGroup>
You can use ajax support like this
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" >
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
Jsf 1.2 doesn't have ajax support the only thing you can do is full page reload which happens on a command button.
I presumed you are using richfaces as a third party for ajax and rich ui components.
Hope this helps.
If you are using primefaces then you can replace tag with like this
<p:ajax event="onchange" update="select2" action="if you want to anything in
backend"/>
If you want to do by javascript then have a hidden h:commandButton and put code in your
javascriptMethod() method like this
document.getElementById("myHiddenButtonId").click();
Related
I am relatively new to JSF and Primefaces. I have a page in which I have three selectOneMenu displaying the same set of values from a map. I would like to make sure that the user selects different values for the three drop downs. I have achieved this by writing a custom validator. But the validator works only if I click the submit page. I want to have an ajax call which would show an error message for drop down 2 as soon as the user selects the same value as drop down 1.Also the same case for drop down 3.Here is my code snippet:
user.xhtml
<h:outputLabel for="Question1" value="#{msg['account.question1']}"/>
<h:message styleClass="validation-error" for="Question1"/>
<h:selectOneMenu id="Question1" required="true" value="#{account.question1}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
<f:validator validatorId="com.validator.QuestionsValidator"></f:validator>
</h:selectOneMenu>
<h:outputLabel for="Answer1" value="#{msg['account.answer1']}"/>
<h:message styleClass="validation-error" for="Answer1"/>
<h:inputText id="Answer1" required="true" value="#{account.answer1}" />
<h:outputLabel for="Question2" value="#{msg['account.question2']}"/>
<h:message styleClass="validation-error" for="Question2"/>
<h:selectOneMenu id="Question2" required="true" value="#{account.question2}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
</h:selectOneMenu>
<h:outputLabel for="Answer2" value="#{msg['account.answer2']}"/>
<h:message styleClass="validation-error" for="Answer2"/>
<h:inputText id="Answer2" required="true" value="#{account.answer2}" />
<h:outputLabel for="Question3" value="#{msg['account.question3']}"/>
<h:message styleClass="validation-error" for="Question3"/>
<h:selectOneMenu id="Question3" required="true" value="#{account.question3}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
</h:selectOneMenu>
<h:outputLabel for="Answer3" value="#{msg['account.answer3']}"/>
<h:message styleClass="validation-error" for="Answer3"/>
<h:inputText id="Answer3" required="true" value="#{account.answer3}" />
I am using JSF 2 and Primefaces 5.2.
Thanks in advance
If you want to execute your validator on an AJAX call, you have to add <f:ajax /> to your <h:selectOneMenu>
<h:selectOneMenu id="Question1" required="true" value="#{account.question1}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
<f:validator validatorId="com.validator.QuestionsValidator"></f:validator>
<f:ajax />
</h:selectOneMenu>
Side question: You state, that you use Primefaces 5.2, but you use JSF standard components (<h:selectOneMenu> instead of <p:selectOneMenu>). Is that on purpose?
You can apply listener on selectonemenu.linke this:
<p:selectOneMenu id="country" value="#{dropdownView.country}" style="width:150px">
<p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropdownView.countries}" />
</p:selectOneMenu>
And then in this oncountrychange() function you will get the values of all the three select items and compare them.
The method is invoked in server side, the fields are updated in managed bean but the view doesn't update.
<h:panelGroup id="grupoPergunta" rendered="#{gameController.view.mostrarPergunta}">
<h:outputLabel id="pergunta" readonly="true" value="#{gameController.view.pergunta.descricao}" />
<h:selectOneRadio styleClass="centro" value="#{gameControllerView.repostaEscolhida}">
<f:selectItem itemValue="#{gameController.view.r1.alternativa}" itemLabel="#{gameController.view.r1.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r2.alternativa}" itemLabel="#{gameController.view.r2.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r3.alternativa}" itemLabel="#{gameController.view.r3.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r4.alternativa}" itemLabel="#{gameController.view.r4.descricao}"></f:selectItem>
</h:selectOneRadio>
</h:panelGroup>
<!-- span onclick="sortearDado();"> Girar dado</span-->
<a4j:commandButton value="Pergunta" action="#{gameController.buscarPergunta()}" onclick="sortearDado();" render="grupoPergunta pergunta"/>
I also tried using <f:ajax> but no effect.
I put the most rerendered internally and used in the render , it managed to solve my problem
<a4j:outputPanel id="painelPergunta">
<h:outputLabel id="pergunta" readonly="true" value="#{gameController.view.pergunta.descricao}" rendered="#{gameController.mostraPergunta}"/>
<h:selectOneRadio style="border:0px;" styleClass="centro" value="#{gameControllerView.repostaEscolhida}" rendered="#{gameController.mostraPergunta}">
<f:selectItem itemValue="#{gameController.view.r1.alternativa}" itemLabel="#{gameController.view.r1.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r2.alternativa}" itemLabel="#{gameController.view.r2.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r3.alternativa}" itemLabel="#{gameController.view.r3.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r4.alternativa}" itemLabel="#{gameController.view.r4.descricao}"></f:selectItem>
</h:selectOneRadio>
</a4j:outputPanel>
<h:commandButton value="Pergunta2" onclick="sortearDado();">
<f:ajax execute="#form" event="click" render="painelPergunta" listener="#{gameController.buscarPergunta()}"></f:ajax>
</h:commandButton>
I have two p:selectOneMenu in a page, both have the same content, the user has to choose two different items, the user cannot choose same item in both selectOneMenu. How do I implement this validation ? My current code is something like this :
<p:selectOneMenu id="itemOne"
value="#{backingBean.itemOne}"
required="true" label="Item One:" requiredMessage="Item one is required!">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{backingBean.itemList}" var="item"
itemLabel="#{item.QLabel}" itemValue="#{item.QLabel}" />
</p:selectOneMenu>
<p:selectOneMenu id="itemTwo"
value="#{backingBean.itemTwo}"
required="true" label="Item Two:" requiredMessage="Item two is required!">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{backingBean.itemList}" var="item"
itemLabel="#{item.QLabel}" itemValue="#{item.QLabel}" />
</p:selectOneMenu>
The first thing came to my mind was to attach a listener in both menus with 'onchange' event, remove already selected item and update the other menu but this seems overkill for such simple task. Is there any other way I can do this ?
I have a page with a <h:selectOneMenu> and I want to show some fields or others depending on the chosen value of the menu. Is this possible and if so, how?
<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
</h:selectOneMenu>
<h:panelGroup rendered="Detergernt">
<p>This will be shown if the selected item Detergent.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item Dishwash.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item equal to powder.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item equals to Liquid.</p>
</h:panelGroup>
You just need to check in the rendered attribute if #{product.productname} returns the desired value. In order to update all those components, you should add an <f:ajax> to the menu which updates a common parent component —which is always rendered— of all conditionally rendered components.
<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
<f:ajax render="groups" />
</h:selectOneMenu>
<h:panelGroup id="groups">
<h:panelGroup rendered="#{product.productname == 'Detergent'}">
<p>This will be shown if the selected item Detergent.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Dishwash'}">
<p>This will be shown if the selected item Dishwash.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Powder'}">
<p>This will be shown if the selected item equal to Powder.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Liquid'}">
<p>This will be shown if the selected item equals to Liquid.</p>
</h:panelGroup>
</h:panelGroup>
See also:
Conditionally displaying JSF components
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
<p:ajax event="onselect" update="selectedOp" listener="#{product.updateSelectedValue}" />
</h:selectOneMenu>
<h:panelGroup rendered="{product.updateSelectedValue ne null}" id="selectedOp">
<p>This will be show selected value</p>
#{product.updateSelectedValue}
</h:panelGroup>
This is how you can display the selected value from drop down on the page. I assume that you are using PrimeFaces, so using an ajax event tag <p:ajax> inside <h:selectOneMenu >. Also adding the condition on <h:panelGroup rendered="{product.updateSelectedValue ne null}">, so that it will be displayed when selected value is other than null.
Yea, you can achieve this . Please do paste your page , so that it is easy for me to explain on the page itself.
The idea is to use an <a4j:outputPanel> as a container and <h:panelGrourp layout="block" rendered="#{}"> as a wrappper for the fields which are need to hidden.
The selected value of selectOneMenu will be used in the rendered attribute of <h:panelGroup>.
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>
<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>
<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.
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>