With the value I get from my combobox, I need to unlock 1 of the elements (inputText) and block the other:e.g
if selecOnMenu value is "A" then inputText with idA is unlocked and the other's blocked
xhtml code:
<h:form prependId="false">
<p:selectOneMenu id="enviado" value="#{combo.valor}">
<f:ajax event="change" execute="enviado" render="saida" />
<f:selectItem itemValue="#{null}" itemLabel="Selecione um item" />
<f:selectItems value="#{combo.disponiveis}" />
</p:selectOneMenu>
<br></br>
<h:outputText id="saida" value="opção: #{combo.valor}" />
<div>
<p> Opção A -- Falta implementar</p>
<p:inputText id="idA" value="Insira texto aqui" disabled="??????" />
</div>
<div>
<p>Opção B -- Flta implementar</p>
<p:inputText id="idB" value="Insira texto aqui" disabled="??????" />
</div>
</h:form>
</h:body>
</html>
UPDATE:
I make it work now using on disable = "#{combo.valor != 'idB'}"
now only need to make the ajax work with it
UPDATE 2:
Well, when using <p:inputText> didn't work, but with <h:inputText> works fine.
UPDATE 3:
I just need to use the right ajax element, i was using jsf just trying to re-render a primefaces element, with the primeFaces ajax worked
Thank you
Related
I have a page with a <h:selectOneMenu> and I want to show some fields or others depending on the chosen value of the selectOneMenu. Is this possible and if so, how?
Yes, this is surely possible. Just bind the dropdown's value to the rendered attribute of the components to be shown/hidden. Here's a kickoff example.
<h:form>
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemLabel="Select..." />
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="#form" />
</h:selectOneMenu>
<h:panelGroup rendered="#{bean.item == 'one'}">
<p>This will be shown if the selected item equals to "one".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'two'}">
<p>This will be shown if the selected item equals to "two".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'three'}">
<p>This will be shown if the selected item equals to "three".</p>
</h:panelGroup>
</h:form>
The <h:panelGroup> is just examplary. It can be every JSF HTML component, such as <h:inputText> or even another <h:selectOneMenu>.
See also:
Conditionally displaying JSF components
when i click on the command button. validate method is getting called but the error message is not getting displayed..
here is my code..
<h:form id="form">
<h:body>
<p:panel style="width:500px">
<h:outputLabel for="year" value="Select Year: *" style="font-weight:bold" />
<p:selectOneMenu id="year" value="#{leaveBean.year}">
<f:selectItem itemLabel="Select One" itemValue="null" />
<f:selectItems value="#{leaveBean.yearDTO}" var="currentUser" itemValue="#{currentUser.name}" itemLabel="#{currentUser.name}" />
<f:validator validatorId="LeaveCardValidator" />
</p:selectOneMenu>
</p:panel>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails" id="button"/>
<h:message for="year" style="color:red"/>
You seem to expect that JSF auto-updates the <h:message> on every ajax request. This is untrue. Perhaps you're confusing with PrimeFaces <p:messages> or <p:growl> which have each an autoUpdate attribute which enables you to tell them to auto-update themselves on every ajax request.
You really need to make sure that the <h:message> is covered by the ajax update. Just give it an ID
<h:message id="yearMessage" ... />
and include it in the client ID collection of the ajax update
<p:commandButton ... update="updateList updateDetails yearMessage" />
An alternative would be to replace <h:message> by <p:messages autoUpdate="true">.
Not sure where are the updateList and updateDetails are located but in the example give above you should use update="#form" instead or in addtion like this:
update="updateList updateDetails #form"
so that the form will be rendered again...
just use one of these :
update the whole form in order to update the content of
<h:message />
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="#form" id="button"/>
or give the <h:message /> an id and id this id to the <p:commandButton/>
<h:message id="msg" for="year" style="color:red"/>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails,msg" id="button"/>
I am using JBoss 5.01 and richfaces: 3.3. When the first h:selectOneMenu id="codOrgao" changes, I need to get the year value of the second h:selectOneMenu id="ano" and then load the third h:selectOneMenu id="codMembro". That is the code that I wrote, I don't know the reason, but doesn't work.
a4j supporte doesn't work(in valueChangeListener="#{populaMembros.pegaListaMembros} class I wrote a simple System.out.println("listener called")" to see if that method is called but it isn't ). Thanks in advance for any help!!!
<h:form styleClass="labelPorCima">
<h:panelGrid id="mpanel">
<div class="content field">
<label for="codOrgao">Selecione um orgão</label>
<h:selectOneMenu id="codOrgao" styleClass="textoLongo" valueChangeListener="#{populaMembros.pegaListaMembros}">
<f:selectItems value="#{populaOrgaosBean.listaItensOrgaos}" />
<a4j:support event="onchange" reRender="codMembro"/>
</h:selectOneMenu>
</div>
<h:selectOneMenu id="ano" styleClass="inputNome">
<f:selectItem itemLabel="2012"/>
<f:selectItem itemLabel="2011"/>
<f:selectItem itemLabel="2010"/>
<f:selectItem itemLabel="2009"/>
<f:selectItem itemLabel="2008"/>
</h:selectOneMenu>
<div class="content field ">
<label for="membro" class="membro">Nome do Membro</label>
<h:selectOneMenu id="codMembro" styleClass="inputNome" disabled="true">
<f:selectItem itemLabel="Selecione um membro" />
</h:selectOneMenu>
</div>
</h:panelGrid>
</h:form>
codOrgao won't fire it's value change listener because it doesn't have a value attribute. The component needs to have a value attribute, bound to a backing bean variable
You should move the actionListener from the <h:selectOneMenu/> to the <a4j:support/>.
So in all, your code should look like:
<h:selectOneMenu id="codOrgao" value="#{bean.theValue}" styleClass="textoLongo">
<f:selectItems value="#{populaOrgaosBean.listaItensOrgaos}" />
<a4j:support event="onchange" reRender="codMembro" actionListener="#{populaMembros.pegaListaMembros}"/>
</h:selectOneMenu>
<h:form action="" prependId="false">
<h:selectOneRadio value="#{managedBean.color}" id="color">
<f:selectItem itemValue="red" itemLabel="Color1 - Red" />
<f:selectItem itemValue="green" itemLabel="Color1 - Green" />
<f:ajax event="click" render="group1" listener="#{managedBean.renderSubQuestions}"/>
</h:selectOneRadio>
<h:panelGroup id="group1">
<h:outputLabel value=" Color Description " rendered="#{managedBean.colorRender}"></h:outputLabel>
<h:inputText rendered="#{managedBean.colorRender}"></h:inputText>
<h:selectOneRadio id="number" value="#{managedBean.integer}" rendered="#{managedBean.colorRender}" >
<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<f:ajax event="click" render="group2 " listener="#{managedBean.renderSubQuestions}"/>
</h:selectOneRadio>
</h:panelGroup>
<h:panelGroup id="group2">
<h:outputLabel value="Number Description " rendered="#{managedBean.integerRender}"></h:outputLabel>
<h:inputText rendered="#{managedBean.integerRender}"></h:inputText>
</h:panelGroup>
</h:form>
In my scenario I used nested JSF AJAX with nested rendered attribute. If I select a color based on the selection, it rendered some radio button (addition elements) with AJAX. It is working fine, but additional elements with AJAX behavior is not working for me. If I remove rendered attribute in number radio button, it is working fine. I dont know where I did mistake.
It is most likely what your ManagedBean is not in ViewScoped or SessionScoped. When you post back to the bean, you are loosing rendered states. I suggest to change for the ViewScoped one.
Not related :
You should remove the action attribute from the h:form since JSF override it.
I am having a drop down menu, on selecting a particular value from a drop down menu, i have to show a datatable corresponding to it and on selecting second from drop down menu ,value the previous data table should hide and the datatable corresponding to second value should populate and so on
here are my codes:
<h:selectOneMenu value="#{bean.value}"
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
style="width:100px;">
<f:selectItem itemLabel="Select" itemValue="Select" />
<f:selectItem itemLabel="5" itemValue="5" id="mySelectedValue1" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="6" itemValue="6" id="mySelectedValue2" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="7" itemValue="7" id="mySelectedValue3" onclick="hideOrShow(??);"/>
</h:selectOneMenu>
<script type="text/javascript">
function hideOrShow(show) {
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
} </script>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
My Question is what to put as parameters in HideOrShow() shown as ?? so that java script function will identify it. And how initially all the datatables will be hidden?
thanks: curious
Using plain JS in combination with JSF is often recipe for trouble and unintuitiveness because of the way how JSF state management works. You should prefer solving the problem using pure JSF. It will also often end up in a simpler view. You can use the JSF-provided <f:ajax> for this particular purpose in combination with the rendered attribute on the components to show/hide.
Kickoff example:
<h:form>
<h:selectOneMenu value="#{bean.value}">
<f:selectItem itemLabel="Select" itemValue="#{null}" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
<f:selectItem itemLabel="7" itemValue="7" />
<f:ajax render="tables" />
</h:selectOneMenu>
<h:panelGroup id="tables">
<h:dataTable value="#{bean.list5}" rendered="#{bean.value == 5}">
...
</h:dataTable>
<h:dataTable value="#{bean.list6}" rendered="#{bean.value == 6}">
...
</h:dataTable>
<h:dataTable value="#{bean.list7}" rendered="#{bean.value == 7}">
...
</h:dataTable>
</h:panelGroup>
</h:form>
Make sure that the bean is in the view scope whenever the tables contain by itself input components.