can't refresh a selectOneMenu - jsf-2

first excuse my english if it's not correct ...
I've a probleme with a primeface's component, I'm trying to refresh a p:selectOneMenu from a p:commandButton, but it's doesn't work (it 's work on another xhtml page, but not here and I can't understand why ...)
First I select an item from an p:autocomplete which update a backingbean's attribute ( for example : userChoose ).
then the p:commandButton is able to call his listener and add userChoose to a list, but i can't refresh the selectOneMenu that display the list. I have to use another p:commandButton to refresh the list.
My form is included into a p:tabMenu in another xhtml page.
<p:autoComplete id="acPojo" value="#{forumBean.user}"
completeMethod="#{autoCompleteBean.completeUser}"
converter="#{userConverter}" forceSelection="true"
var="usr" itemLabel="#{usr.loginUtilisateur}" itemValue="#{usr}">
<p:column>
<h:outputText value="#{usr.loginUtilisateur}"/>
</p:column>
</p:autoComplete>
<p:commandButton value="ajouter" process="acPojo #this "
udpate=":tabView:formSujet:listeUser" actionListener="#{forumBean.addUser}"/>
<p:selectOneMenu value="#{forumBean.user}" converter="#{userConverter}" var="us" id="listeUser"
itemValue="#{us}" itemLabel="#{us.loginUtilisateur}">
<f:selectItems value="#{forumBean.newSujet.listeUserAllowed}" var="User"
itemValue="#{User}" itemLabel="#{User.loginUtilisateur}" />
<p:column>
<h:outputText value="#{us.loginUtilisateur}"/>
</p:column>
<p:ajax process="#this" />
</p:selectOneMenu>
<p:commandButton id="refreshAdmin" icon="ui-icon-arrowrefresh-1-w"
update=":tabView:formSujet:listeUser" />
Thanks for help.

From your code:
udpate=":tabView:formSujet:listeUser"
This has at least 2 (potential) mistakes. The right attribute name is update, not udpate. The one on your other button has however the right attribute name.
It that still doesn't work, then the other potential mistake is that the client ID tabView:formSujet:listeUser does not exist in HTML DOM tree (and thus JavaScript/jQuery is unable to find and replace it). That can happen if the <p:tabView> is dynamic (i.e. you're using <p:tabView value="#{bean.tabs}" var="tab">, because it prepents the tab index number in the final client ID like so tabView:0:formSujet:listeUser if it's the 1st tab.
But, after all, as both the dropdownlist and the commandbutton are in the same NamingContainer parent, you don't need an absolute client ID at all. Just the relative client ID should suffice:
update="listeUser"
Fix that on your both buttons.
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

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

Primefaces selectBooleanCheckbox with binding

i am trying to make composite component(multiply use on each view) which allows me to show some inputs by checkbox value. One input is depended on checkbox value. I dont want to bind it to bean cause this value is not saved to database or so. I though that i ll save it in view scope holder.
I ve added in face config holder for bindings
<managed-bean>
<description>Holder of all component bindings.</description>
<managed-bean-name>components</managed-bean-name>
<managed-bean-class>java.util.HashMap</managed-bean-class>
<managed-bean-scope>view</managed-bean-scope>
</managed-bean>
composite component:
<p:selectBooleanCheckbox binding="#{components[cc.attrs.bindingId]}">
<p:ajax update="panel"/>
</p:selectBooleanCheckbox>
<h:panelGroup id="panel">
<p:inputText rendered="#{components[cc.attrs.bindingId].value}" value="#{cc.attrs.beanPropertyOnTrue}">
<p:inputText rendered="#{not components[cc.attrs.bindingId].value}" value="#{cc.attrs.beanPropertyOnFalse}">
</h:panelGroup>
It works fine, I can use this component multiply on one view, but the problem is when i am using commandButton to send form to server, checkboxes are changing to unchecked....
<p:commandButton value="show decision dialog"
actionListener="#{testBean.action}"
update="#form"
oncomplete="if (args && !args.validationFailed){ dialog.show() }"/>

Rendering of an element depending on primefaces rating

I started using primafaces and I came up with the following scenario. The user rates and element and if the rating is valid then a span block appears or it hides depending the case. I am based on the example here: (http://www.primefaces.org/showcase/ui/input/rating.xhtml ) with the ajax approach. Note that a rate is valid if the user clicks on any star. So here's what I've done so far:
<h:form>
<p:panelGrid>
<p:row>
<p:column>
<p:rating value="#{searchBean.dateWeight}">
<p:ajax event="rate" listener="#{searchBean.addDatetoWeights}"
update="dates" render="dates" />
<p:ajax event="cancel"
listener="#{searchBean.removeDatefromWeights}"
update="dates" />
</p:rating>
<h:panelGroup id="dates" rendered="#{searchBean.dateRated}">
<h:outputText value="test"></h:outputText>
</h:panelGroup>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
segment of the bean:
boolean dateRated;
int dateWeight;
public void addDatetoWeights(){
dateRated=true;
weights.put("date",dateWeight);
System.out.println(dateRated);
}
public void removeDatefromWeights(){
dateRated=false;
if(weights.containsKey("date"))
weights.remove("date");
}
Let's go back to the basics: HTML and JavaScript. It's important to also know them before diving into JSF. JSF is in the context of this question merely a HTML/JS code generator.
With <p:ajax update="dates"> you're basically telling JavaScript to grab the HTML element by the given ID and then replace its contents with the new contents retrieved from server in ajax response. However, as the <h:panelGroup id="dates"> is in first place never rendered to the HTML output, JavaScript can't find the element by document.getElementById() stuff in order to replace its contents and then just ignores the instruction.
Instead, the <p:ajax update="dates"> must refer a component which is always rendered, so that JavaScript can actually find it. Only its contents can be conditionally rendered.
Here's a rewrite:
<h:panelGroup id="dates">
<h:outputText value="test" rendered="#{searchBean.dateRated}" />
</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?

Dynamically add Primefaces Hotkey control

I am building an app where one of the requirements is heavy use of hotkeys. So heavy in fact that we want to pull those hotkeys back into a central controller.
The basic idea is each page will have a key associated with it. When jsf hits that key, it will go back to a central enummap to decide what hotkeys are supposed to be associated with that page and what methods are supposed to be added to the keys of that page.
My problem is the dynamic load. I can't use the
For now, I have this
<h:form binding="#{hotkeyController.form}">
<f:event listener="#{hotkeyController.genKeyHandler('HOTKETEST')}" type="preRenderComponent"/>
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
Then for my backing bean i have this
public void genKeyHandler(String pageKey) {
Hotkey hotkey = new Hotkey();
hotkey.setBind("ctl+shift+d");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTD')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
hotkey = new Hotkey();
hotkey.setBind("ctl+shift+a");
hotkey.setAsync(true);
// "#{hotkeyController.keyHandler('HOTKETEST', 'F1')}"
hotkey.setActionExpression(createMethodExpression("#{hotkeyController.keyHandler('HOTKEYEXAMPLE', 'CTLSHIFTA')}", null,
String.class, String.class));
hotkey.setUpdate("displayHotkey");
form.getChildren().add(hotkey);
}
Now this works in the sense that it actually inserts the hotkey into the form. I can see it in inspector. But, my problem is two fold. One, if I refresh the page, I get duplicate ID errors, if I use the preRenderView, I get "Error restoring component" errors. seems like no combination will work.
Is there any way to make this work? All I want is to have the bean method that inserts the hotkeys fire the first time a page is loaded and only fired once in the life of the page/view/whatever. This shouldn't be this hard.
My suggestion is that you use an exclusive form for the hotkeys.
Here is the sample:
<h:form id="mainForm">
<p:remoteCommand name="loadHotKeys" action="#{hotkeyController.genKeyHandler('HOTKETEST')}" update=":hotkeyForm" global="false" process="#this" />
<p:outputPanel id="displayHotkey">
<h:outputText value="#{hotkeyController.keyText}" rendered="#{not empty hotkeyController.keyText}"/>
</p:outputPanel>
</h:form>
<h:form id="hotkeyForm" binding="#{hotkeyController.form}" />
<script type="text/javascript">
jQuery(document).ready(loadForm());
</script>
And the genKeyHandler method should clear the hotkeyForm (form.getChildren().clear()) before adding the hotkeys.

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>

Resources