I'm using primefaces 5.3 and i have a page which has p:selectOneMenu as below:
<p:selectOneMenu id="addressCountry" value="#{myBean.address.country}">
<f:selectItems value="#{myBean.countries}" var="country"
itemValue="#{country.code}" itemLabel="#{country.name}" />
</p:selectOneMenu>
This is a combobox that allow users to select their country. It show all countries around the world (250 countries) so it lead to performance problem.
My page have several tabView and each of them has several comboboxes like this, when i switch tab and update whole tabView, all those comboboxes will be renderred again and it increase payload a lot.
I know with SelectOneMenu, Primefaces divide it into two parts: the input and the panel to hold all selectable options. When i update this component by id (update=":#{p:component('addressCountry')}"), Primefaces will render both parts, even the panel just static contents and no need to be rendered again for every request.
I've try to update by css selector (just select the input) but it also not work.
Can we only update the input, exclude the panel when we need?
Anybody can help me?
Thanks alot
Related
I am using h:selectOneMenu for dropdown but the valueChangeListner is not firing.
I can not use submit() onChange as it will refresh my entire page and i will lose the selected values for other components. Please suggest how to fire valueChangeListner without affecting other components on the page.
The h:selectOneMenu implemented like below:
<h:selectOneMenu id="Q1List"
value="#{myBean.q1Value}" onclick="showHideQ1()"//To open another field based on value selected, working fine
valueChangeListener="#{myBean.q1ValueChangeListner}">
<f:selectItem itemValue="" itemLabel="Make a selection"/>
<f:selectItems value="#{RateComparision.q1OptionsList}" id="dr1"/>
</h:selectOneMenu>
Note: i can not use ajax or anything like that as my page is not supporting them.
Any JS solution or component property may help me.
Thanks,
Mahesh
Environment:
Jboss 7.1.1.Final
JSF 2.2.6
Seam 2.3.1.Final
Richfaces 4.5.10.Final
Issue:
The rich:picklist populates the right hand side with duplicates during the second time load of a popup. Here are the steps to reproduce.
The popuppage with the rich:picklist is loaded by clicking on a link in a main page
The popup page loads with the rich:picklist populated with the right side and left side values
The values are added from left side of picklist to right side and the popup is saved.
Now when we reopen the popup the picklist has duplicate values on the right side
XHTML Snippet:
<rich:pickList id="AssignRole" value="#{staffResourceRolesTargetList}" sourceCaption="Roles" targetCaption="Assigned Roles" listHeight="120"
converter="#{org.jboss.seam.ui.EntityConverter}" orderable="false">
<f:selectItems value="#{staffResourceRolesSourceList}"
var="assignRoles" itemLabel="#{assignRoles.name}" />
<f:selectItems value="#{staffResourceRolesTargetList}"
var="assignedRoles" itemLabel="#{assignedRoles.name}" />
</rich:pickList>
Note:
I have overridden the hashcode and equals method in the entity used in the picklist
I had to use two f:selectItems list inorder for the right side to prepopulate
The source and target list are of the same entity collection
Please help me debug this. I have spent a lot of time and hope that someone can give me direction. Please let me know if you need more info.
I have a data entry form where user enters lots of data. When user comes to the page to view existing data, the page should be displayed in read-only mode (all values shown as text), when he clicks 'Edit' button, normal form with all input controls should be shown so that user can change and save data.
We are using JSF 2.0 with PrimeFaces library. It is easy to achieve above behavior for text box and text area but not for Checkbox, multi-select, radio,..... controls. Is there any easy way available to achieve above behavior rather than writing our own code (which may run into lot of lines thus making backing bean code ugly)
Thanks for your help...
I'm not sure why you think that you need additional backing bean code for this. You've all the needed values in the backing bean already. Your problem is more in the presentation of those values. Just display them in the desired format by writing the view code accordingly. Perhaps you were thinking it too the hard way.
Instead of a select boolean checkbox, you could display for example a "Yes" or "No" value.
<h:selectBooleanCheckbox value="#{bean.checked}" rendered="#{bean.edit}" />
<h:outputText value="#{bean.checked ? 'Yes' : 'No'}" rendered="#{not bean.edit}" />
Instead of a select one menu/radio, you could just display the value in an output text.
<h:selectOneMenu value="#{bean.selectedItem}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectOneMenu>
<h:outputText value="#{bean.selectedItem}" rendered="#{not bean.edit}" />
Instead of a select many listbox/checkbox, you could just display for example all values comma separated in a loop.
<h:selectManyListbox value="#{bean.selectedItems}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectManyListbox>
<h:panelGroup rendered="#{not bean.edit}">
<ui:repeat value="#{bean.selectedItems}" var="selectedItem" varStatus="loop">
#{selectedItem}#{not loop.last ? ', ' : ''}
</ui:repeat>
</h:panelGroup>
You could wrap it all in a tag file or a composite to minimize boilerplate and code repetition.
I've done this in my last project using composite components which has a "preview" attribute and in the implementation I render a text when this attribute is true and the real (editing) when the attribute is false. For checkbox in preview mode you could show the checkbox itself but disabled, for radio - show the selected item.
MyFaces Tomahawk library [1] contains an extended version of the standard components that adds displayValueOnly attribute for this purpose. This might help you (I haven't used them).
[1] - http://myfaces.apache.org/tomahawk-project/tomahawk20/index.html
I want to try out building a simple grid that has a delete column, consisting of checkboxes, just like the usual one in email.
User can then tick the checkboxes, and press delete, and i can get all the checked records, and delete them one by one.
Im trying to find a way to achieve this, but so far im still in doubt.
These are what i have in mind, each with it's own implementation question, haha :
How to get the checked row indexes ? Using actionlistener for each toggle on each checkbox ? (but how do i pass the clicked index to the actionlistener ?)
Or is there a way where i can get all the grid model, and loop the data to find out which one is checked, just like swing ? (but how do i get the grid model in the jsf bean ?)
Or perhaps i should bind them to a simple list that contains only the checkbox column data ? (but how do i bind each checkbox to the list using indexes ?)
Im currently using primefaces, but i think the JSF solution can also be applied to primefaces datatable.
Please share your thoughts on this !
Thank you !
Isn't this example from Primefaces showcase exactly what you are looking for?
It looks that it is simply adding a column to the p:dataTable this way:
<p:dataTable var="item" value="#{yourBean.allElements}"
selection="#{yourBean.selectedElements}">
<p:column selectionMode="multiple" />
... other columns
</p:dataTable>
Say I have a websites with 3 panel grid (just for example..) and I would like to have buttons inside each grid that only cause the contents of that grid to refresh so the rest of the page doesn't necessarily have to refresh.
How do I do that?
I tried to have a form sorround that grid but it seems like the rest of the page still gets refreshed.
A Note - I'm trying to achieve something like what happens when you work with a picklist. when you move the objects between the lists there doesn't seem to be any page refresh...
Thanks!
If you are using RichFaces, you should definitivly check the Ajax chapter of the RichFaces manual. I think you will find everything you need to know there.
Here a small example for partial page rendering:
<a4j:commandButton value="update" reRender="infoBlock"/>
<h:panelGrid id="infoBlock">
<!-- Some content-->
</h:panelGrid>