p:commandbutton update does not work - ajax

I have searched through forums and am aware of how id-generation of HTML-DOM-Elements work with NamingContainers and without them. Nonetheless, in this code i try to put a commandbutton in one side of the page, that should trigger an update of the other side of the page.
The 'viewWorkbenchButton' fires its action properly and the backend-data is fine. But :wbManageForm:wbMgmtPanel is not updated.
<ui:composition xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view>
<p:panel id="dataGridPanel">
<p:panelGrid id="dataGridPanelGrid" styleClass="pGrid" columns="2"
columnClasses="alignTop, alignTop">
<p:column>
<h:form id="wbSelectForm">
<p:panel styleClass="noBorderPanel">
<p:dataTable var="workbench"
value="#{WorkbenchControllerBean.myWorkbenches}"
paginator="#{WorkbenchControllerBean.myWorkbenches.size() > 10}"
rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<f:facet name="header">
My Workbenches
</f:facet>
<p:column headerText="Id" sortBy="#{workbench.workbenchId}">
<h:outputText value="#{workbench.workbenchId}" />
</p:column>
<p:column headerText="Name" sortBy="#{workbench.name}">
<h:outputText value="#{workbench.name}" />
</p:column>
<p:column headerText="Actions">
<p:commandButton id="viewWorkbenchButton" icon="ui-icon-show"
title="View Workbench" update=":wbManageForm:wbMgmtPanel"
actionListener="#{WorkbenchControllerBean.viewWorkbench(workbench)}">
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</p:column>
<p:column>
<h:form id="wbManageForm">
<p:panel id="wbMgmtPanel" styleClass="noBorderPanel">
<h:outputText id="tabText" value="Active Wb: #{WorkbenchControllerBean.number}" />
<p:tabView id="tabView">
....
</p:tabView>
</p:panel>
</h:form>
</p:column>
</p:panelGrid>
</p:panel>
</f:view>
I already tried to update different components (:wbManageForm, :wbManageForm:tabText, :wbManageForm:tabView:treetable) but none of them was updated...
I am using Primefaces 3.5.
What am i missing here? Thanks a lot in advance!

Try using action instead of actionListener. Also, update only the wbmanageForm. If that doesn't work, try updating the component with your bean method.
You can do that by adding this to the end of your method: RequestContext.getCurrentInstance().update("wbManageForm");

Related

JSF Primefaces ajax on p:datatable

I am using JSF Primefaces for my UI. I have a specific requirement about ajax on p:datatable. This is a sample page of my project:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:comp="http://java.sun.com/jsf/composite/components/">
<ui:define name="content">
<h:form id="form1">
<p:growl id="messages" showDetail="false" />
<p:panel header="Available Rows" style="width: 15%;">
<p:dataTable id="table" value="#{rowBean.rows}" var="row"
widgetVar="50" style="width: 60px;" editable="true">
<p:ajax event="rowEdit" listener="#{rowBean.onEdit}"
update="form1:messages" />
<p:ajax event="rowEditCancel" listener="#{rowBean.onCancel}"
update=":form1:messages" />
<p:column>
<f:facet name="header">
<h:outputText value="Row ID" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.id}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{row.id}"
style="width:100%" label="Row ID">
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Row Value" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.value}" />
</f:facet>
<f:facet name="input">
<p:inputText disabled="true" value="#{row.value}"
style="width:100%" label="Row Value">
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panel>
<p:spacer height="5px;"/>
<p:panel id="createPanel" header="Create Row" closable="false" toggleable="true"
collapsed="true" style="width: 15%;">
<p:panelGrid columns="6">
<h:outputLabel for="rowBean" value="Row ID" />
<p:inputText value="#{rowBean.row.id}"
required="true" label="Row ID" style="width:125px" />
<h:outputLabel for="rowBean" value="Row Value" />
<p:inputText value="#{rowBean.row.value}"
required="true" label="Row Value" style="width:125px" />
<f:facet name="footer">
<p:commandButton value="Create" action="#{rowBean.createRow}"
update=":form1" />
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Here I have a data table which lists down all the rows created. Each row is having id and value. Value is editable. There is one more panel within the form which creates new rows. Backing bean is pre-populated with all the created rows with #PostConstruct. Backing bean is having other methods to edit, cancel and create. This page is working and given below is the new requirement.
In some cases there can be an error associated with each row. If there is an error attached with a row, then the value text needs to be updated like a link. While clicking on the link, the row ID and a parameter needs to be passed to backing bean. With these params, backing bean fetches the error details and passes it to the page. Then the error message needs to be shown on a pop-up.
Can you tell me how to do this?
On the XHTML side:
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
On the JAVA side, in the function you call when you press the button:
if(error) {
FacesContext.getCurrentInstance().addMessage(
null,
new FacesMessage(FacesMessage.SEVERITY_WARN, "Error",
"Your error message."));
}
PD: This is my first answer, i'm getting used to the post options, i'm sorry if you dont see my message properly ;)
Maybe like this?:
<f:facet name="output">
<h:outputText value="#{row.value}" rendered="#{!row.hasError}" />
<h:commandLink value="#{row.value}" rendered="#{row.hasError}" command="#{row.command(parameters..)}" />
</f:facet>

ajax call in jsf with popup window

Below is my code in .xhtml file. I need to add ajax call in one of the inputtextbox component. Say.. on blur of inputtextbox where id="search_dias" i should make ajax call with popup window showing the response value and then i should place that value in inputTextBox where id="search_partyName"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form>
<p:panel id="panel1" styleClass ="myPanelStyle1" header="SEARCH PRODUCTIONS " toggleable="true" toggleSpeed="100">
<h:panelGrid columns="3" border="0" rules="group">
<p:column >
<h:outputLabel for="search_dia" value="Diameter:"/>
</p:column>
<p:column>
<p:inputText id="search_dias" value="#{addFormRequest.diameter}"/>
</p:column>
<p:tooltip for="search_dias" value="Enter Dia Value" showEffect="fade" hideEffect="fade" />
<p:column >
<h:outputLabel for="search_partyName" value="PartyName:"/>
</p:column>
<p:column>
<p:inputText id="search_partyName" value="#{addFormRequest.search_partyName}"/>
</p:column>
<p:tooltip for="search_partyName" value="Enter Party Name" showEffect="fade" hideEffect="fade" />
<p:column >
<h:outputLabel for="search_date" value="Date:"/>
</p:column>
<p:calendar id="search_date" value="#{addFormRequest.search_date}"/>
<p:tooltip for="search_date" value="Enter Production Date" showEffect="fade" hideEffect="fade" />
<p:commandButton id="searchProductions" value="SEARCH" action="search" />
</h:panelGrid>
</p:panel>
</h:form>
The answers can be found here:
Show dialog on dataTable row selection
Inputtext blur event
Show dialog on ajax event in dataTable

JSF PrimeFaces / Ajax rendering to Datable fails to add items to the list

I am trying to user a form in 'panelGrid' to render values in a dataTable using <f:ajax>. However, when submitting using the <h:commandButton> the values sent are not displayed in the dataTable. I am not getting a stack or any console errors in the browsers.
This is the my xhtml (Simplified):
Product Catalog:
<p:tabView id="tabView" style="width: 65%" >
<p:tab id="books" title="Books">
<p:dataGrid var="book" value="#{saleBean.productList}" columns="3"
rows="9" paginator="true" paginatorTemplate="{CurrentPageReport}
{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="3,6,9">
<h:form id="product" >
<p:panel header="#{book.name}" style="text-align: center">
<h:panelGrid columns="1" style="width: 65%">
<!-- Add Book Images here -->
<h:outputText value="#{book.price}"/>
<h:outputLabel value="Dct (in dollars): " />
<h:inputText id="discount" value="#{saleBean.item.unit_discount}" style="width: 50%" />
<p:commandButton value="Add to Cart" update=":dataTableForm:sc"
action="#{saleBean.doAddItem}"/>
</h:panelGrid>
</p:panel>
</h:form>
</p:dataGrid>
</p:tab>
<p:tab id="arts" title="Art / Various">
<!-- Art Products to be added here -->
</p:tab>
<p:tab id="other" title="Other">
<!-- Various Products to be Added here -->
</p:tab>
</p:tabView>
<hr/>
<h1>Shopping Cart</h1>
<hr/>
<h:form id="dataTableForm">
<p:dataTable id="sc" value="#{saleBean.sd}" var="item" style="width: 60%">
<p:column>
<f:facet name="header">
<h:outputText value="Product"/>
</f:facet>
<h:outputText value="#{item.product_fk}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:outputText value="#{item.quantity}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Price"/>
</f:facet>
<h:outputText value="#{item.unit_Cost}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Discount"/>
</f:facet>
<h:outputText value="#{item.unit_discount}"/>
</p:column>
</p:dataTable>
</h:form>
</h:body>
This the bean (Simplified):
public String doAddItem()
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
According to PrimeFaces documentation :
http://www.primefaces.org/docs/vdl/3.4/primefaces-p/commandButton.html
Your actionListener="#{saleBean.doAddItem}" must use a function corresponding to that :
public void doAddItem(ActionListener event)
{
// do your stuff
}
To use action here is an example :
action="#{saleBean.doAddItem}"
public String doAddItem(void)
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
Try to use only pf components when you can eg p:datatable. Replace the button with a p:commandButton and use process and update instead of f:ajax.
Also maybe it will by better to include the p:datatable in the form too.

How to reference #{cc.clientId} in ajax update/process/render/execute?

I don't know how to reference descendant components of composite component in update or process (alias render or execute).
I have this composite component resources/components/crud.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsf/composite">
<c:interface>
<c:attribute name="controller" required="true" />
<c:facet name="fields" required="true"/>
</c:interface>
<c:implementation>
<p:dataTable
id="table"
value="#{cc.attrs.controller.autoResultModel}"
var="unit"
paginator="true"
rows="10"
lazy="true"
paginatorAlwaysVisible="true"
paginatorPosition="top"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{totalRecords} records found, Page: {currentPage}/{totalPages}"
rowsPerPageTemplate="5,10,15"
sortBy="#{unit.creationTime}"
sortOrder="descending"
selectionMode="single"
selection="#{cc.attrs.controller.selected}">
<p:ajax event="rowSelect" update="editDialog trashDialog table:commands"/>
<f:facet name="header">
<h:panelGroup id="commands" layout="block">
<p:commandButton id="newButton" value="new" image="ui-icon ui-icon-plusthick" oncomplete="editDialog.show()" actionListener="#{cc.attrs.controller.clearSelected()}" process="#this" update="#{cc.clientId}" />
<p:commandButton value="edit" image="ui-icon ui-icon-wrench" onclick="editDialog.show()" type="button" disabled="#{cc.attrs.controller.selected.id == null}"/>
<p:commandButton value="delete" image="ui-icon ui-icon-trash" onclick="trashDialog.show()" type="button" disabled="#{cc.attrs.controller.selected.id == null}"/>
</h:panelGroup>
</f:facet>
<c:insertChildren/>
</p:dataTable>
<h:panelGroup id="editDialog">
<p:dialog modal="true" widgetVar="editDialog" showEffect="fold" hideEffect="puff">
<f:facet name="header">
<h:outputText value="#{bundle['create']}" rendered="#{cc.attrs.controller.selected.id == null}"/>
<h:outputText value="#{bundle['update']}" rendered="#{cc.attrs.controller.selected.id != null}"/>
</f:facet>
<h:panelGroup layout="block">
<c:renderFacet name="fields"/>
<br/>
<p:commandButton value="#{bundle['create']}" actionListener="#{cc.attrs.controller.create}" process="editDialog" update="table" oncomplete="closeDialog(xhr, status, args, editDialog)" rendered="#{cc.attrs.controller.selected.id == null}"/>
<p:commandButton value="#{bundle['update']}" actionListener="#{cc.attrs.controller.update}" process="editDialog" update="table" oncomplete="closeDialog(xhr, status, args, editDialog)" rendered="#{cc.attrs.controller.selected.id != null}"/>
<p:commandButton value="#{bundle['copy']}" actionListener="#{cc.attrs.controller.create}" process="editDialog" update="table" oncomplete="closeDialog(xhr, status, args, editDialog)" rendered="#{cc.attrs.controller.selected.id != null}">
<f:setPropertyActionListener target="#{cc.attrs.controller.selected.id}" value="#{null}"/>
</p:commandButton>
</h:panelGroup>
</p:dialog>
</h:panelGroup>
<p:dialog modal="true" header="asdasd" widgetVar="trashDialog" hideEffect="explode" showEffect="explode">
<h:panelGroup id="trashDialog" layout="block">
<h:outputText value="#{bundle['trashconfirm']}">
<f:param name="name" value="#{cc.attrs.controller.selected.name}"/>
</h:outputText>
</h:panelGroup>
<p:commandButton value="#{bundle['confirm']}" actionListener="#{cc.attrs.controller.destroy}" process="#this" update="table" oncomplete="closeDialog(xhr, status, args, trashDialog)"/>
</p:dialog>
</c:implementation>
</html>
called by this page test.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite/components">
<h:head>
<title>Default Title</title>
<h:outputStylesheet name="css/screen.css"/>
<h:outputScript name="js/common.js"/>
</h:head>
<h:body>
<p:growl id="messages" autoUpdate="true"/>
<h:form id="itemForm">
<cc:crud id="itemCrud" controller="#{itemController}">
<f:facet name="fields">
<h:panelGrid columns="3">
<h:outputLabel value="manufacturer" for="manufacturer"/>
<p:selectOneMenu id="manufacturer" value="#{itemController.selected.manufacturer}" converter="#{manufacturerController.converter}">
<f:selectItems value="#{manufacturerController.facade.findAll()}" var="e" itemLabel="#{e.title}" itemValue="#{e}"/>
</p:selectOneMenu>
<p:message for="manufacturer"/>
<h:outputLabel value="partNumber" for="partNumber"/>
<p:inputText id="partNumber" value="#{itemController.selected.partNumber}"/>
<p:message for="partNumber"/>
<h:outputLabel value="configurationIndex" for="configurationIndex"/>
<p:inputText id="configurationIndex" value="#{itemController.selected.configurationIndex}"/>
<p:message for="configurationIndex"/>
</h:panelGrid>
</f:facet>
<p:column headerText="#{bundle['manufacturer']}" filterBy="#{unit.manufacturer.title}" sortBy="#{unit.manufacturer.title}">
#{unit.manufacturer.title}
</p:column>
<p:column headerText="#{bundle['partNumber']}" filterBy="#{unit.partNumber}" sortBy="#{unit.partNumber}">
#{unit.partNumber}
</p:column>
<p:column headerText="#{bundle['configurationIndex']}" filterBy="#{unit.configurationIndex}" sortBy="#{unit.configurationIndex}">
#{unit.configurationIndex}
</p:column>
<p:column headerText="#{bundle['modifyStatus']}" filterBy="#{unit.modifyStatus}" sortBy="#{unit.modifyStatus}">
#{unit.modifyStatus}
</p:column>
<p:column headerText="#{bundle['description']}" filterBy="#{unit.description}" sortBy="#{unit.description}">
#{unit.description}
</p:column>
</cc:crud>
</h:form>
</h:body>
</html>
And I have this output:
AVVERTENZA: PWC4011: Unable to set request character encoding to UTF-8 from context /epcsdb, because request parameters have already been read, or ServletRequest.getReader() has already been called
INFO: Skipping call to libraryExists(). Please set context-param com.sun.faces.enableMissingResourceLibraryDetection to true to verify if library http://java.sun.com/jsf/composite/components actually exists
INFO: Cannot find component with identifier "itemForm:itemCrud:table:newButton" in view.
INFO: Cannot find component with identifier "itemForm:itemCrud" in view.
INFO: Cannot find component with identifier "editDialog" in view.
INFO: Cannot find component with identifier "trashDialog" in view.
INFO: Cannot find component with identifier "itemForm:itemCrud:j_idt34" in view.
Result of this is that no component is updated with any ajax call. I don't understand why "itemForm:itemCrud:table:newButton" cannot be found. It is only referenced with process="#this".
I'm using primefaces 3.0.RC1-SNAPSHOT and Mojarra 2.1.3_01.
You need to prefix absolute client IDs with the NamingContainer separator which is by default :.
update=":#{cc.clientId}"
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Ajax call is made but the related fields are updated only after page refresh

I have tried making an ajax call for a selectOneMenu using JSF 2 and primefaces 2.2. The actionListener method is being called. But the columns I specified in the update attribute are not getting updated. When I refersh the page, I could find the updated values. Please help me out in this.
The code I used was
<h:form id="mainForm" prependId="false">
<p>
<p:tabView>
<p:tab title="Receipt">
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="table1:#{rowIndex}:receiptCode, table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Print">
</p:tab>
Try f:ajax instead of p:ajax and re-render the whole form to get closer to the problem source :
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model"
itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<f:ajax render="#form"
listener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}"/>
</h:selectOneMenu>
This should work as stated in my answer to your previous question.
Partial updates of dataTables and ajax updates of dataTables triggered from a component within the dataTable are not working in the 2.2 version of Primefaces. This is a known bug that may have been resolved in version 3.
One suggestion you can try is to use a single form for each dataTable and only update elements from within that one form.

Resources