Primefaces ajax pagination not working - ajax

I have following jsf page, in which datatable is populated via ajax request from database. Problem is, after pushing another page button on pagination bar, table shows no results. Changing scope of backing bean to session helps, but it is not a solution. Why it is happening?
<h:form>
<h:panelGrid columns="2" cellpadding="8" style="width: 545px">
<h:panelGroup>
<p:outputLabel value="Client name: " for="searchString" />
<br />
<p:inputText id="searchString" title="searchString" value="#{findClientBean.searchString}" />
</h:panelGroup>
<h:panelGroup>
<br />
<p:message for="searchString" />
</h:panelGroup>
<p:commandButton value="Search" styleClass="pCommandButton" >
<f:ajax execute="searchString" listener="#{findClientBean.findClient}" render=":resultTable" />
</p:commandButton>
</h:panelGrid>
</h:form>
<br />
<p:dataTable id="resultTable" var="client" value="#{findClientBean.resultList}" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
<p:column headerText="Search results">
<h:outputLink value="../temp.xhtml?id=#{client.id}">#{client.firstName} #{client.lastName}</h:outputLink>
</p:column>
</p:dataTable>
<h:form>
Backing bean code:
#Named
#RequestScoped
public class FindClientBean implements Serializable {
#Inject
private ClientDAO clientDAO;
#NotNull(message="Search string cannot be empty")
private String searchString;
private List<Client> resultList;
public void findClient() {
resultList = clientDAO.findClientByNameOrLastnamePart(searchString);
}
public void setResultList(List<Client> resultList) {
this.resultList = resultList;
}
public List<Client> getResultList() {
return resultList;
}
public String getSearchString() {
return searchString;
}
public void setSearchString(String searchString) {
this.searchString = searchString;
}
}

Your Client resultList is being populated whenever the user presses the Search button.
As the collection is inside a RequestScoped bean, the resultList will be erased as soon as it is sent back to the View (along with the entire bean).
As a result, when the user tries to navigate to another page (thus making a second request) the component won't find a populated resultList anymore and a "No records found" message will be displayed.
"Promote" you bean to ViewScoped (or any scope that would make your bean live longer).
#Named
#ViewScoped
public class FindClientBean implements Serializable{
(...)
}

Related

Modal edit dialog on Primefaces with JSF

I'm trying to create some CRUD JSF application with edit/new screen implemented as a modal dialog. The problem is that I can't find a way how to make new and edit operation done by this dialog performed with ajax. With delete all was very simple (just ajax="true" option).
Here is a code of button which is used to show the dialog
<h:form id="dataForm">
<div class="ui-g">
<div class="ui-g-12 ui-md-9">
<p:dataGrid var="product" value="#{products.productList}" columns="3" layout="grid"
rows="12" paginator="true" id="products"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:event type="preRenderView" listener="#{products.preloadProductList}" />
<f:facet name="header">
Products
</f:facet>
<p:panel header="#{product.name}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{product.name}"/>
<h:outputText value="#{product.price}"/>
<%-- Here new/edit dialog window is opened --%>
<p:commandLink update=":dataForm:productDetail" oncomplete="PF('productDialog').show()">
Edit
<f:setPropertyActionListener value="#{product}" target="#{products.product}"/>
</p:commandLink>
<p:commandLink update=":dataForm" action="#{products.deleteAction(product)}" ajax="true">
Delete
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
<ui:include src="WEB-INF/dialogs/edit_product.xhtml"/>
</div>
</div>
</h:form>
Here is dialog window which is moved to separete file edit_product.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
hideEffect="fade"
resizable="false">
<p:outputPanel id="productDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty products.product}"
columnClasses="label,value">
<h:outputText value="Id:"/>
<h:outputText value="#{products.id}"/>
<h:outputText value="Name"/>
<h:inputText value="#{products.name}"/>
<h:outputText value="Price"/>
<h:inputText value="#{products.price}"/>
</p:panelGrid>
<h:commandButton value="Save" action="#{products.saveProduct}"/>
</p:outputPanel>
</p:dialog>
</ui:composition>
Here is Managed bean which is used by the Product dataGrid and dialog window.
#ManagedBean(name = "products")
#SessionScoped
public class ProductsBean {
private static final Logger logger = LoggerFactory.getLogger(ProductsBean.class);
#Inject
private ProductRepository productRepository;
private Product product;
private Collection<Product> productList;
public void preloadProductList(ComponentSystemEvent event) throws AbortProcessingException {
productList = productRepository.getAll();
}
public String getId() {
return String.valueOf(product.getId());
}
public void setId(String id) {
product.setId(Long.valueOf(id));
}
public String getName() {
return product.getName();
}
public void setName(String name) {
product.setName(name);
}
public int getPrice() {
return product.getPrice();
}
public void setPrice(int price) {
product.setPrice(price);
}
public Product getProduct() {
return this.product;
}
public void setProduct(Product product) {
this.product = product;
}
public Collection<Product> getProductList() {
logger.info("Get product list");
return productList;
}
public void newProductAction() {
this.product = new Product();
}
public void deleteAction(Product product) {
logger.info("Delete product");
productRepository.remove(product);
}
public void saveProduct() {
productRepository.merge(product);
}
}
No matter if I add ajax option or not the whole window is reloaded after Save button is pressed. Could you show me the right direction for the implementation, please?
P.S. If you need more code to answer you can find it here:
Main page with Product table https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/index.xhtml
Edit/New dialog https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/WEB-INF/dialogs/edit_product.xhtml

losing request parameter in jsf for second ajax poll call

I'm facing a problem with poll request, the first call is ok and the second is loosing the request parameter. Below is the code:
<h:form id="form">
<p:poll interval="10" listener="${emsstatbean.getEmsStat_list(request.getParameter('para'))}" update="emstatTable" />
<p:dataTable id="emstatTable" var="emsstat" value="${emsstatbean.getEmsStat_list(request.getParameter('para'))}" emptyMessage="No statistic found with given criteria" styleClass="table table-striped table-bordered table-hover" >
<p:column headerText="Server Hostname" >
<h:outputText value="#{emsstat.id.timeStamp}" />
</p:column>
<p:column headerText="Os name" >
<h:outputText value="#{emsstat.upTime}" />
</p:column>
<p:column headerText="Os name" >
<h:outputText value="${emsstat.state}" />
</p:column>
</p:dataTable>
</h:form>
and this is the bean class:
#ManagedBean(name = "emsstatbean")
public class EmsStatBean implements Serializable
{
public List<TibcoEmsStat> getEmsStat_list(int p)
{
return service.listEmsStats(p);
}
#ManagedProperty("#{emsStatService}")
EmsStatService service;
#PostConstruct
public void init()
{
}
public void setService(EmsStatService service)
{
this.service = service;
}
}
This is the URL called: content/public/TibcoEmsStat.xhtml?para=254
So when I paste that on browsers I'm getting the data table with all rows, but when I wait 10 sec I don't see content and I get "No statistic" found with given criteria, because parameter is empty.
Can you please help me to understand where is the issue?
this is how i fixed after reviewing some suggested link
added to the bean:
#ViewScoped
and a variable to store the id
public int ems_inst;
public int getEms_inst() {
return ems_inst;
}
public void setEms_inst(int ems_inst) {
this.ems_inst = ems_inst;
}
on the xhtml i did:
<f:metadata>
<f:viewParam name="ems_inst" value="#{emsstatbean.ems_inst}" />
</f:metadata>
<h:form id="form">
<p:poll interval="10"
listener="${emsstatbean.getEmsStat_list(emsstatbean.ems_inst)}" update="emstatTable" />
<p:dataTable id="emstatTable" var="emsstat" value="${emsstatbean.getEmsStat_list(emsstatbean.ems_inst)}"
all now is working fine
thanks

p:commandButton action not invoked after and ajax update

I have a JSF page which has a p:commandButton which has ajax=true and renders a p:panel which is wrapped in p:outputPanel when clicked. When this button is clicked the action method will set showCreateUser value in ManagedBean to true and this is used to render the Panel. This works fine - on button click the panel is rendered properly. Inside the p:panel there is another p:commandButton. This commanButton is not working as nothing happens when I click on it. The action method is never invoked. When I debug I realised that even though the ajax action sets showCreateUser to true but when I click on second button the showCreateUser value is false. So, the panel panel rendered=false and so the action is never invoked. Following are the xhtml and managedbean class. How can I resolve this? Thanks for your help!
registration.xhtml
<h:form id="userForm" style="background-color:white;border:0px; width:90%;">
<p:messages id="messagesForDebugging"
showDetail="true"
autoUpdate="true" />
<ui:debug hotkey="x"/>
<div style="margin-bottom: 10px;">
<p:commandButton id="btnConfirmYes" value="Yes" ajax="true" update="userRegOutPanel"
action="#{regBean.confirmYes}" styleClass="button" style="height:35px;">
<!-- <f:ajax render="userRegOutPanel" execute="userRegOutPanel"/> -->
</p:commandButton>
<p:commandButton id="btnConfirmNo" value="No" ajax="false"
action="#{regBean.confirmNo}" styleClass="button" style="height:35px;"/>
</div>
<p:outputPanel id="userRegOutPanel">
<p:panel id="userRegPanel" rendered="#{regBean.showCreateUser}">
<p:panelGrid id="userRegPanelGrid">
<p:row>
<p:column style="width:40%;background-color:#00a5b6;-moz-border-radius: 10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;text-align:left;">
<h:inputHidden id="ssn" value="#{regBean.ssn}"/>
<p:panelGrid>
<p:row>
<p:column>
<p:commandButton value="Submit" ajax="true" action="#{regBean.submitRegistration}"
styleClass="button" style="width:140px;height:35px;" type="submit"/>
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
</p:outputPanel>
</h:form>
Managed Bean
#ManagedBean
#ViewScoped
public class RegBean implements Serializable{
private static final long serialVersionUID = 1L;
static Logger log = LoggerFactory.getLogger(RegBean.class);
private String ssn;
private boolean showCreateUser = false;
public void confirmYes(){
setShowCreateUser(true);
}
public String confirmNo(){
log.info("In retrieveRegistration");
FacesContext fc = FacesContext.getCurrentInstance();
fc.addMessage("registrationError", new FacesMessage(
FacesMessage.SEVERITY_ERROR,
"Error. Contact customer service",
"Error. Contact customer service"));
return "/registration/registrationError";
}
public String submitRegistration() {
log.info("In submitRegistration");
FacesContext fc = FacesContext.getCurrentInstance();
return "/secured/home";
}
public String getSsn() {
return ssn;
}
public void setSsn(String ssn) {
this.ssn = ssn;
}
public boolean isShowCreateUser() {
return showCreateUser;
}
public void setShowCreateUser(boolean showCreateUser) {
this.showCreateUser = showCreateUser;
}
}
<p:commandButton id="btnConfirmNo" value="No" ajax="false"
action="#{regBean.ConfirmNo}"
styleClass="button" style="height:35px;"/>
In above code ,you've set action to be "ConfirmNo". I don't see any method as such.
Change above code as :
<p:commandButton id="btnConfirmNo" value="No" ajax="false"
action="#{regBean.agentConfirmNo}"
styleClass="button" style="height:35px;"/>
Now, it will invoke the method agentConfirmNo from your registration bean.
I hope that helps.

p:selectOneMenu ajax does not fire within p:dataGrid

I have a selectOneMenu rendered for each row of my dataGrid. The problem is the method of the ajax listener is not called when the selection changes.
If I use the same selectOneMenu outside the dataGrid, it works fine. Same behaviour occurs with p:selectBooleanCheckbox.
XHTML page:
<h:form id="form2">
<p:dataGrid id="gridC" widgetVar="gridC"
value="#{myBean.comp}" var="site" columns="1" rowIndexVar="siteIndex">
<p:column>
<h:outputText value="#{site.sito}" />
</p:column>
<p:column>
<p:selectOneMenu id="stato" value="#{site.stateId}"
required="true">
<p:ajax update="#form :tabView:frm_buttons" global="false"
listener="#{myBean.testChangeState}" />
<f:selectItems value="#{myBean.siteStates}" var="s"
itemLabel="#{s.state}" itemValue="#{s.stateId}" />
</p:selectOneMenu>
</p:column>
</p:dataGrid>
</h:form>
Managed bean:
#ManagedBean
#ViewScoped
public class MyBean implements Serializable {
private SiteState siteStates;
private Comp comp;
// getters and setters...
public void testChangeState() {
System.out.println("Test change state fired.");
}
}
SiteState bean:
public class SiteState implements Serializable {
private String state;
private String stateId;
// getters and setters...
}
Found the secret.
The data grid is within a tab of an accordion panel, and I used an id like this:
<p:tab id="sito#{sito.idSitoStoccaggio}"
This is not the case, because it produces strange behaviours in some situations, like events not firing from within a data grid, for example.
Switching to:
<p:tab id="sito"
resolved my issue.

3 cascading dropdown menus with Ajax

I want to modify the example "ajaxify select" in PrimeFaces showcase application and introduce a third p:selectOneMenu with chooses depending on selection of second p:selectOneMenu.
Here is the modified code :
<h:form>
<p:growl id="msgs" showDetail="true"/>
<p:panel header="Double Combo" style="margin-bottom:10px;">
<h:panelGrid columns="3" cellpadding="5">
<p:selectOneMenu id="city" value="#{pprBean.city}">
<f:selectItem itemLabel="Select City" itemValue="" />
<f:selectItems value="#{pprBean.cities}" />
<p:ajax update="suburbs"
listener="#{pprBean.handleCityChange}" />
</p:selectOneMenu>
<p:selectOneMenu id="suburbs" value="#{pprBean.suburb}">
<f:selectItem itemLabel="Select Suburb" itemValue="" />
<f:selectItems value="#{pprBean.suburbs}" />
<p:ajax update="subsuburbs"
listener="#{pprBean.handleSuburbChange}" />
</p:selectOneMenu>
<p:selectOneMenu id="subsuburbs" value="#{pprBean.subsuburb}">
<f:selectItem itemLabel="Select Subsuburb" itemValue="" />
<f:selectItems value="#{pprBean.subsuburbs}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" update="msgs"
actionListener="#{pprBean.displayLocation}"/>
</p:panel>
</h:form>
But the listener function #{pprBean.handleSuburbChange} is never executed. I saw in another forum that the dynamic code in ajax response don't include tag other that tag indicated in update attribute, but how can I do then?
In PPRBean code I added:
#Named("pprBean")
#RequestScoped
public class PPRBean implements Serializable {
// ...
public void handleSuburbChange() {
if (suburb != null && !suburb.equals("")) {
subsuburbs = subsuburbsData.get(suburb);
} else {
subsuburbs = new HashMap<String, String>();
}
log.info("subsuburbs:" + subsuburbs);
}
// ...
The listener won't be invoked if the selected item cannot be processed. You've put the bean in the request scope which means that it's garbaged when the response associated with the request is finished (i.e. when the browser is finished loading the page). So, when you submit the form, a new request will be fired and a brand new bean is created which in your case apparently doesn't prepare/prefill the list of suburbs in the (post)constructor in order to find the selected item (and execute the listener).
To fix this, you'd normally need to put the bean in the view scope by the JSF #ViewScoped annotation along with #ManagedBean.
#ManagedBean
#ViewScoped
public class Bean {
// ...
}
This way the bean instance will live as long as you're interacting with the same view. But as you're using CDI to manage the beans instead of JSF, you'd need to use #ConversationScoped instead and control the Conversation yourself.
#Named
#ConversationScoped
public class Bean {
#Inject
private Conversation conversation;
#PostConstruct
public void init() {
conversation.begin();
// ...
}
public void submit() {
// ...
conversation.end();
}
}

Resources