I have a panel grid with 2 columns, the first containing a label and the second a component.
The listener backingBean.onFunktionChange sets the value of backingBean.functionGraduand to true. So the label and the menue for the degree are rendered in this case.
The problem is that if I first select a city in the menu for city and then change the value in the menu "function", the whole panel is updated and thus the city menu is reset.
However, in case of function change I want to to keep the preselected city.
If I wrap the label and component for function and degree in a panelGroup with id=panelFunction lets say and only update this panel, destroys the two column layout.
Is there any possibility to only update a part of the panelGrid without affecting the layout of the panelGrid?
<h:panelGrid columns="2" id="panel">
<label>#{function}</label>
<p:selectOneMenu id="menuFunction" value="#{...}" >
<p:ajax event="change" process="menuFunction"
update="panel"
listener="#{backingBean.onFunctionChange}" />
<f:selectItems .../>
</p:selectOneMenu>
<h:outputLabel id="labelDegree" for="menuDegree"
value="#{msgs.degree}"
rendered="#{backingBean.functionGraduand}" />
<p:selectOneMenu id="menuDegree" value="#{...}" rendered="#{backingBean.functionGraduand}">
<f:selectItems .../>
</p:selectOneMenu>
<label class="required">#{msgs.city}</label>
<p:selectOneMenu value="#{...}" id ="city">
<f:selectItems .../>
</p:selectOneMenu>
</h:panelGrid>
I solved this by processing the whole panel in the ajax request:
...
<p:ajax event="change" process="panel"
update="panel"
listener="#{backingBean.onFunctionChange}" />
...
Related
I have a selectOneMenu with two items and a panelGroup.
When item 1 is selected I want to show the panelGroup and when item 2 is selected hide it.
I try to do it with the onchange event but I don't know how show/hide the panelGroup. Maybe using the panelGroup ID ?
<p:selectOneMenu id="list" value="#{myBean.list}" onchange="???" >
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup">
...
</h:panelGroup>
the change="" will either give u access to a EL Listener or a javascript, which has no update component to it. You're best off adding a ajax call inside the selectOneMenu.
e.g.
<p:selectOneMenu id="list" value="#{myBean.list}">
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
<p:ajax event="change" process="#this" update="myPanelGroup" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup" rendered="#{myBean.list == '1'">
...
</h:panelGroup>
(you need to have rendered on it to ensure it's only shown if your value is 1 (not 2 etc). Although this is the AJAX solution, you could do it using jQuery by binding a change listener to the selectOneMnu 'list' - on change, run your javascript and show/hide the panelgroup div (means u dont need the rendered etc)..
Example:
$("#list").change(function(event){
//get value here and show/hide div using javascript/css what ever you prefer
});
you can use <p:remoteCommand> tag to update you form. And use rendered to show/hide your panel.
see below code and it is working on my side and much easier.
<p:remoteCommand id="remotecommand" name="updatePanel"
update="#form"></p:remoteCommand>
<p:selectOneMenu id="list" value="#{myBean.list}" onchange="updatePanel()" >
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup" rendered="#{myBean.list eq 'Item 1'}">
...
</h:panelGroup>
When the value of list is Item 1 on that time show the panel otherwise it is hide
Rendering content on demand is a common practice in jsf. You should also rethink the use of a two choices selectOneMenu. You have to wrap the content in a panelGroup element and set the inner element to be rendered like this:
<p:selectBooleanCheckbox id="cboOverview" value="#{ctrlBean.bValue}">
<p:ajax event="change" update="outputOverviewWrapper" />
</p:inputSwitch>
<h:panelGroup id="outputOverviewWrapper">
<h:panelGroup id="toggleOverview" rendered="#{!ctrlBean.bValue}">
...
</h:panelGroup>
</h:panelGroup>
If you want to stick with the selectOneMenu you should also use a valueChangeListener to set the rendering attribute properly.
Reference is here.
Given the following code:
<p:column headerText="#{text.article}">
<h:panelGroup>
<p:autoComplete id="relationArticle"
value="#{relation.article}"
completeMethod="#{articleRelationsModel.findArticles}"
queryDelay="#{text.query_delay}"
minQueryLength="#{text.artikkel_min_query_length}"
var="article"
itemLabel="#{article.articleNo} #{article.text1}"
itemValue="#{article}"
converter="#{articleConverter}"
scrollHeight="150"
forceSelection="true"
styleClass="ui-autocomplete-big">
<p:ajax event="itemSelect" update="relationUnit" process="#this"/>
</p:autoComplete>
<p:message for="relationArticle"/>
</h:panelGroup>
</p:column>
<p:column headerText="#{text.unit}" style="width: 80px;">
<h:selectOneMenu id="relationUnit" value="#{relation.unit}" converter="#{articleUnitConverter}">
<f:selectItem itemLabel="<< #{text.search}" noSelectionOption="true" itemDisabled="#{relation.article != null}"/>
<f:selectItems value="#{articleRelationsModel.getUnits(relation)}" var="unit" itemLabel="#{unit.code}" itemValue="#{unit}"/>
<p:ajax event="change" process="#this" update="#this"/>
</h:selectOneMenu>
<p:message for="relationUnit"/>
</p:column>
How can I refresh the "relationUnit" component after the user has selected a value in the "relationArticle" component?
What happens now, is that after the autcompete itemSelect event has fired, the "relationUnit" component gets updated with new content using #{articleRelationsModel.getUnits(relation)}. During this update, the relation object is updated with one of the options from the resulting list. This, however, is not reflected in the "relationUnit" component after the update. But if I manually do another update after this, it gets selected.
How can I achieve the wanted result here?
You can use p:remoteCommand, which is usually used to call the ManagedBean Methods from Javascript.
While it serves the above purpose you can use it to update other components also.
You can call the p:remoteCommand from p:ajax's oncomplete attribute.
<p:autoComplete id="relationArticle" ...>
<p:ajax event="itemSelect" update="relationUnit" onComplete="updateRelationUnit()" process="#this"/>
</p:autoComplete>
<p:remoteCommand name="updateRelationUnit" update="relationUnit" process="#this" />
Now p:ajax will update relationUnit once and then calls the p:remoteCommand which in-turn relationUnit again.
I don't know why you want this strange behavior, but the above strategy and code servers your purpose just fine.
We have build a component that consists of a TextInput and Select Box. So that the selection can be made either via the drop down list or by typing in the value into the text field. When a selection is made the Input Box is automatically filled with the key and if the key is entered the correct item in the selection box is displayed.
<h:panelGroup rendered="#{cc.attrs.rendered}">
<div id="#{cc.clientId}" class="abc-select #{cc.attrs.styleClass}" >
<h:inputText id="input" disabled="#{cc.attrs.disabled}"
value="#{cc.attrs.value}">
<a4j:ajax event="change" render="select" />
</h:inputText>
<rich:select disabled="#{cc.attrs.disabled}"
id="select" value="#{cc.attrs.value}"
listWidth="#{cc.attrs.listWidth}"
converter="#{cc.attrs.converter}">
<f:selectItems value="#{cc.attrs.items}" var="item"
itemValue="#{item}" itemLabel="#{item.name}" />
<a4j:ajax event="selectitem" render="input" oncomplete="setFocusOnInputField();" />
</rich:select>
</div>
</h:panelGroup>
However when we pass in an <a4j:ajax event="change" ... /> with an onChange event to render a component external element. It only works when the selection is made via the drop down menu.
<abc:myComponent id="idMC"
value="#{bean.value}"
items="#{bean.itemList}"
converter="#{itemConverter}">
<a4j:ajax event="change" render="idA idB idC" />
</kfn:select>
So far I figured out that it must have to do with the fact that the inputText already has an a4j element listing for change <a4j:ajax event="change" render="select" />.
When I change the ajax element in the inputText element to use <f:ajax .. /> instead it works fine.
Can someone explain why this is the case and is there a better solution?
So I want to ajax up a data table to change and be filtered based on which state is selected in the drop down. I have the following:
<p>Choose State to Filter By:</p>
<h:selectOneMenu value="#{productListingBean.choosenState}">
<f:selectItem itemValue="All" />
<f:selectItems value="#{productListingBean.stateList}" />
</h:selectOneMenu>
<h:commandButton value="Sort">
<f:ajax event="action" render="myTable" />
</h:commandButton>
and
<h:dataTable id="myTable" value="#{productListingBean.getAllProducts()}" var="product" styleClass="hovertable">
<h:column>
<f:facet name="header">
ID
</f:facet> ...
my product bean is request scoped and I save the selection from the selectOnmenu in the Choosen state variable and getAllProducts() method handles the filtering.
What am I missing, this does not work?
The issues seems to be that this needs to be surrounded in a tag.
I am trying to delete an image which belongs to an album.
I provide 2 drop downs, the first allows to select the album the second to select an image of the album. The first when changes sets the second.
Then the remove button calls a remove method.
I have debugged it a number of times but the values are always null.
Do you know why? how can I make it work?
note: when I set the first drop down the value is present but after I set the second they both become null.
Thanks
<h:form>
<h:panelGrid>
<h:outputLabel value="#{diaryMB.selectedAlbum}"/>
<p:selectOneMenu
id="albums" value="#{diaryMB.selectedAlbum}" effect="drop">
<f:selectItem itemLabel="Select An Album" itemValue="-1" />
<f:selectItems value="#{diaryMB.albums}" var="album"
itemLabel="#{album}" itemValue="#{album}" />
<p:ajax event="change" listener="#{diaryMB.updateImage()}" update="images"/>
</p:selectOneMenu>
<h:outputLabel value="#{diaryMB.selectedImage}" />
<p:selectOneMenu
id="images" value="#{diaryMB.selectedImage}" effect="drop">
<f:selectItem itemLabel="Select An Image" itemValue="-1" />
<f:selectItems value="#{diaryMB.images}" var="image"
itemLabel="#{image}" itemValue="#{image}" />
</p:selectOneMenu>
<p:commandButton id="removeImageButton" value="Remove" ajax="false" action="#{diaryMB.removeImage()}"/>
</h:panelGrid>
</h:form>
public String removeImage(){
System.out.println("I am selected image:"+selectedImage);
System.out.println("I am slected album "+selectedAlbum);
if(selectedImage!=null && !selectedImage.equals("-1"))
{diaryManager.removeImageFromAlbum(diaryOwner, selectedAlbum, selectedImage);
return "Friends";}
else
return "Home";
}
It might be beacuase your managed bean is RequestScoped and is being recreated after every ajax request. Try using ViewScoped or SessionScoped and see if the values remain.