Change input based on combo value - jsf-2

I know this question exists somewhere else in SO but either the solutions are old (and JSF seems to have improved a lot) or I cannot make the solution work.
As simple as it sounds, I would like to replace the text of an input element based on the value of a combo box. I would like to use Ajax, and would like this to work even if there is only one element in the combo (it doesn't matter if by default the selection of the combo is empty).
<h:selectOneMenu id="fnamecombo" valueChangeListener="#{namesController.setForename(fnamecombo)}">
<c:forEach items="#{namesController.myForenames}" var="myforename">
<f:selectItem itemValue="#{myforename}" itemLabel="#{myforename}" />
</c:forEach>
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
This doesn't work. So first of all, I have no idea how to call the setForename method. If I use valueChangeListener="#{namesController.setForename('xxxxx')}" it works, but only the 1st time and iff there are more than one element in the combo, since otherwise the event does not seem to be fired.
What is the easy fix?
EDIT
Ok, so I have made progress. It was easier than I expected:
<h:selectOneMenu id="fnamecombo" value="#{namesController.forename}">
<c:forEach items="#{namesController.myForenames}" var="myforename">
<f:selectItem itemValue="#{myforename}" itemLabel="#{myforename}" />
</c:forEach>
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
This seems to work on a selectItem that I create by hand, but not on the one that is printing with the foreach loop. So this is the rendered code, where I obtained 'john' from the loop and I manually created 'example':
<select id="myForm:fnamecombo" name="myForm:fnamecombo" size="1" onchange="mojarra.ab(this,event,'valueChange',0,'myForm:fnameinput')">
<option value="example">example</option>
<option value="john">john</option>
</select>
It works with 'example' but not with 'john'.

Finally I got the answer.
<h:selectOneMenu id="fnamecombo" value="#{namesController.forename}">
<f:selectItems value="#{namesController.myForenames}" />
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
No need for forEach as mentioned by Alexandre Lavoie.
This answer by Luiggi Mendoza gave me the hint to find it out. The reason my input was not updated by the values in the f:selectItems and it was in the ones that I introduced manually is the scope of the managed bean. I realised that the input was actually being updated in any case, but when coming from the f:selectItems the input was updated with null. Why? Because the scope of namesController was #RequestScoped and not #ViewScoped. Changing this solves the problem.

Related

Does not work properly id generation on ui:repeat My faces 2.2.9 + prime faces 5.3

Actually I'm working with Myfaces version 2.2.9 and I've the following structure to generate any panel according with a specific number selected by the user.
...
<ui:repeat value="#{garajes}" var="garaje" varStatus="loop">
<p:panelGrid >
<h:outputLabel value="Numero de garaje #{loop.index+1}: " />
<h:outputLabel value="Matricula #{loop.index+1}: " />
<p:inputText value="#{garaje.numeroGaraje}" maxlength="5" >
</p:inputText>
<p:inputText id="matriculaInmobiliariaGaraje-#{loop.index+1}" value="#{garaje.matriculaInmobiliaria}"
maxlength="20">
</p:inputText>
...
</p:panelGrid>
</ui:repeat>
....
So, when is rendered the above code the identifiers are weird, has another things like the following image:
So I don't know how to remove this weird things inside of id
Note: I need a specific id to update another component inside of the loop.
What can I do to get a right identifiers inside of ui:repeat?
As to the concrete problem, just give all NamingContainer components a fixed ID. This includes the <ui:repeat> itself.
<ui:repeat id="garajes" ...>
As to the concrete requirement, you're overcomplicating things. A NamingContainer will all by itself worry about uniqueness of IDs of children. Your attempt in id="matriculaInmobiliariaGaraje-#{loop.index+1}" won't work at all as #{loop} variable isn't available during view build time, when the component is being instantiated with id. Get rid of it. You can inside a NamingContainer just use a relative ID to reference another component in the same NamingContainer.
<ui:repeat ...>
<p:inputText id="foo" />
<p:inputText ...><p:ajax ... update="foo" /></p:inputText>
</ui:repeat>
This will work just fine.
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
How to use EL with <ui:repeat var> in id attribute of a JSF component

Parameters Process Failed when I select a

Hi I am doing something really simple but it is not working I am using jboss and jsf 2.0.
So I am trying to create a form that shows some fields according to a selection from the user of dropdown menu so I am using selectOneMenu
<h:panelGrid columns="2" id="formTaxon">
<h:outputLabel value="Nombre Científico Taxón" for="taxonInput" />
<p:inputText value="#{taxonDM.taxon.nombreCientificoTaxon}"
id="taxonInput" />
<h:outputLabel value="Nombre Común" for="nombreComunInput" />
<p:inputText value="#{taxonDM.taxon.nombreComunTaxon}"
id="nombreComunInput" />
<h:outputLabel value="Tipo" for="tipoTaxon" />
<p:selectOneMenu id="tipoTaxon" value="#{taxonDM.taxon.tipoTaxon}"
name="tipoTaxon">
<f:selectItem itemLabel="Seleccione uno" itemValue="" />
<f:selectItems value="#{tipoTaxonDM.tiposTaxones}" var="txn"
itemValue="#{txn.idTipoTaxon}" itemLabel="#{txn.nombreTipo}" />
<f:ajax process="#this"
listener="#{taxonController.tipoTaxonesXX}" render="formTaxon" />
</p:selectOneMenu>
<p:inputText id="test" val="" />
</h:panelGrid>
I also tried without the listener first
But nothing works, I dont get any errors on the server I get an error when I check the scripts with firebug
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><error><error-name>class java.lang.IllegalStateException</error-name><error-message><![CDATA[Parameters processing failed.]]></error-message></error></partial-response>
I tested it on a jboss 7.0.2 and 7.1.1 with firefox. I read there was a bug between IE and jboss 7.1.1 related with this but I guess this is not the case.
I also tried with h:selectOneMenu instead of p:selectOneMenu. There was no change.
You are binding the value of your dropdown box as a taxon.tipoTaxon in <p:selectOneMenu id="tipoTaxon" value="#{taxonDM.taxon.tipoTaxon}">, when the item values are idTipoTaxon.
As far as we can get, the former is of type TipoTaxon and the latter is of type Integer, most probably. So when JSF tries to convert between those types it fails.
You need either to provide for a Converter so that JSF would know how to convert submitted strings to your model objects (you can find many examples here, on Stack Overflow), or bind dropdown value as an integer as well like value="#{taxonDM.taxon.idTipoTaxon}".

Primefaces inputtext focus at the end of the text

Here a snippet of my JSF:
<p:tabView id="tabView" var="tab" value="#{data.tabs}" widgetVar="tabViewWidget"
activeIndex="#{data.newActiveTabIndex}">
<p:ajax event="tabClose" listener="#{logic.closeTab}" />
<p:tab title="#{tab.content.title != null ? tab.content.title : '&lt;new&gt;'}"
closable="#{tab.isClosable and data.tabs.size() > 2}">
<h:outputText value="#{tab.id} Test" />
<p:focus rendered="#{data.componentIdToFocus != null}" for="#{data.componentIdToFocus}" />
<p:inputText id="test" value="#{tab.content.title}">
<p:ajax event="keyup" listener="#{logic.setFocusingComponent}" update=":form:tabView" />
</p:inputText>
</p:tab>
</p:tabView>
The intent is that there is a textfield within each tab that updates the title of the tab while writing.
The given snippet works except that p:focus places the cursor at the beginning of the text that is already written. I want the cursor to be placed at the end of the text already written. So that a user can type and while he/she is typing the title adapts automatically.
I hope my case is clear.
Does anybody have a solution for that?
Best regards,
Florian
You can use the onfocus="this.value=this.value" trick to "deselect" the value so that the cursor automagically ends up in the end of the value. This should work as good for the <p:inputText> as it basically generates just a <input type="text"> element.
<p:inputText ... onfocus="this.value=this.value" />
See also:
Use JavaScript to place cursor at end of text in text input element
Unrelated to the concrete problem, I wouldn't use ajax and such on keyup event and an update of the whole tabview. This seems to be quite expensive. I'd rather do a simple HTML DOM traversion and manipulation here by JS/jQuery.
E.g.
<p:inputText ... onkeyup="updateTitle(this)" />
with
function updateTitle(inputInTab) {
var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
$("a[href='#" + panelId + "']").text(inputInTab.value);
}

JSF 2: Cannot choose default entry in dropdown element when dropdown is required and default entry is null

I have the following JSF 2 code:
<p:selectOneMenu id="dropdown" value="#{data.selection}" required="true" converter="selectOneMenuConverter">
<f:selectItem itemLabel="Select one..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{data.entries}" var="entry" itemLabel="#{entry.name}" itemValue="#{entry}" />
<p:ajax update="display" event="change" />
</p:selectOneMenu>
<h:panelGroup id="display">
<h:outputText value="#{data.selection}" />
</h:panelGroup>
Everything works as expected when I choose a value from the dropdown.
When the user "deselects" an entry by choosing "Select One", JSF complains that this is not possible because the selectonemenu is required.
The problem comes from there that the p:ajax makes a partial submit that triggers validation. Immediate=true does also not work because in case the immediate happens on an input field (like selectonemenu is) a validation is performed.
The validation shall only happen when the user presses the "go on" button on the bottom of the page (not shown in code)
Further the given converter converts the Strings to Objects and for the default value it returns null (that's also the expected value within the domain for "no selection").
So my question is what I must do to fulfill my case.
For my this is a standard case and I cannot imagine that there is no solution for this.
Any ideas?
Best regards,
Florian
The validation shall only happen when the user presses the "go on" button on the bottom of the page (not shown in code)
Then just tell the dropdown's required attribute to do exactly that instead of hardcoding a true.
<h:form id="form">
<p:selectOneMenu ... required="#{not empty param['form:go']}">
...
</p:selectOneMenu>
...
<p:commandButton id="go" ... />
</h:form>
The #{not empty param['form:go']} will only evaluate true when the form submit has actually been taken place by the submit button which has the client ID form:go in the particular example. If you don't like hardcoding client IDs either, then reference it as follows:
<h:form>
<p:selectOneMenu ... required="#{not empty param[go.clientId]}">
...
</p:selectOneMenu>
...
<p:commandButton binding="#{go}" ... />
</h:form>

update value: radio-button values togglig back and forth

I'm trying to update a a radio-componet, which is triggered by a onchange-event of a select-box. I see the radio-button toggling as desired after the onchange, but it automatically toggles back the next second.
<h:selectOneMenu id="selectId" value="#{someBean.someSelectValue}"
onchange="this.form.submit()" valueChangeListener="#{someBean.someChange}" immediate="true">
<p:ajax update="radioId"/>
<f:selectItems value="#{someBean.availableSraTitel}" />
</h:selectOneMenu>
<h:selectOneRadio id="radioId" value="#{someBean.someRadioValue}">
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
</h:selectOneRadio>
What am I missing here?
Jonny
Remove onchange="this.form.submit()" (the f:ajax will submit the value to the server)
Also remove immediate="true" (I don't think you really planning to skip any validations here)
Last thing, change <p:ajax update="radioId"/> into <f:ajax render="radioId"/>
p:ajax is from primefaces and you are using plain JSF components
As suggested by BalusC : You also better replace the valueChangeListener="#{someBean.someChange}" by adding listener="#{someBean.someChange}" to your f:ajax (you should change teh signature of the method too)

Resources