I have a page with a prime faces wizard that has 3 tabs, in my third tab there are two data tables, the first one is a list of data from a database and I have an Ajax on it that when I double click on a row it call a method to add the selected record to a different table in the same database and it gets inserted successfully and I can see it in the database table, but I want to get viewed in the second data table in my page as soon as it gets added (the second data table lists the data from my database) I have tried all the mentioned ideas on Ajax update but non of them worked for me!! can someone see what am I doing worng?
Here is my Wizard:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="/WEB-INF/layouts/exam_createor.xhtml">
<ui:define name="content">
<h:form id="frmSemesterExam">
<p:wizard id="tabsSemesterExamId" widgetVar="wiz"
flowListener="#{mbCoursesExamBank.onFlowProcess}" showNavBar="false"
showStepStatus="true">
<p:tab title="#{msg2.get('semester_exam')}" id="tabExamId">
<ui:include src="/pages/instructors/semester_course_exam.xhtml" />
</p:tab>
<p:tab title="#{msg2.get('forms')}" id="tabFormsId">
<ui:include src="/pages/instructors/exam_forms.xhtml" />
</p:tab>
<p:tab title="#{msg2.get('questions_in_this_form')}" id="tabQuestionsForm">
<ui:include src="/pages/instructors/questions_form.xhtml" />
</p:tab>
</p:wizard>
</h:form>
</ui:define>
</ui:composition>
</html>
And here is my third tab which has the dataTables:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:o="http://omnifaces.org/ui">
<p:panelGrid columns="6" id="pnlfourmData1">
<f:facet name="header">
<div align="center">#{msg2.get('exam_forms')}</div>
</f:facet>
</p:panelGrid>
<p:dataTable id="tblAllQuestions" value="#{mbInstructor.fullList}"
var="asEmp" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{asEmp.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect"
update="#parent:tblAllQuestions,frmSemesterExam:tabQuestionsForm"
process="#this" listener="#{mbInstructor.submitForm()}" />
<p:column headerText="#" width="8%">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('Questions')}">
#{asEmp.questionTxt}
</p:column>
</p:dataTable>
<p:dataTable id="tblAllQuestions2" value="#{mbInstructor.formsQuestion}"
var="as" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{as.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect" update="#this" process="#this" />
<p:column headerText="#" width="8%">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('Question in this form')}">
#{as.question.questionTxt}
</p:column>
</p:dataTable>
</html>
Please note that I have tried to put my dataTables inside a form and update them but did not help!
Related
I'm trying to populate some dropdown menus in primefaces with content depending on some choices from other selections in the GUI. This is a simplified example of what I'm trying to do:
<html 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"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
<h:head>
<title>Test</title>
</h:head>
<h:body>
<h:form>
<c:set var="options" value="#{['1','2','3']}" />
<c:set var="currentValue" value="#{3}" />
<h:outputText value="${options}" />
<ui:repeat var="r" value="#{options}">
<h:outputText value="#{r}" />
</ui:repeat>
<c:set var="currentValue" value="#{currentValue}" />
<p:selectOneMenu id="selectValue"
value="${currentValue}"
class="pFieldSet_Template_Input200 r10">
<p:ajax event="change" />
<ui:repeat var="r" value="#{options}">
<f:selectItem itemLabel="Choice #{r} (20180101)" itemValue="#{r}" />
</ui:repeat>
</p:selectOneMenu>
</h:form>
</h:body>
</html>
When I visit the page it shows [1, 2, 3]123 and an empty selectOneMenu. I would have expected the selectOneMenu to contain the choices as well. The iteration obivously works in the above case so I don't know why it doesn't show the options in the menu. What am I doing wrong?
The <ui:repeat> is an UI component while <f:selectItem> is a taghandler (like JSTL). Taghandlers runs during view build time before UI components which runs during view render time. So at the moment the <ui:repeat> runs, there is no means of a <f:selectItem>.
A <c:forEach>, which is also a tag handler, would work:
<p:selectOneMenu id="selectValue"
value="${currentValue}"
class="pFieldSet_Template_Input200 r10">
<p:ajax event="change" />
<c:forEach items="#{options}" var="r">
<f:selectItem itemLabel="Choice #{r} (20180101)" itemValue="#{r}" />
</c:forEach>
</p:selectOneMenu>
I'm trying to create a simple composite component based on JSF h:panelGroup:
filter.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<composite:interface>
</composite:interface>
<composite:implementation>
<span>Расширенный фильтр</span>
<h:panelGroup id="#{cc.clientId}" class="filter"
style="background:white">
<composite:insertChildren></composite:insertChildren>
</h:panelGroup>
</composite:implementation>
and place a component that has to be partially submitted inside it.
<h:form id="issueFilterForm" prependId="false">
<c3:filter>
<h:panelGrid columns="2">
<h:outputText value="Продукт:" />
<p:selectOneMenu value="#{issueFilterBean.selectedProd}"
filter="true" filterMatchMode="contains">
<f:selectItem itemLabel="Выберите продукт" itemValue="-1" />
<f:selectItems value="#{issueFilterBean.products}" var="proj"
itemLabel="#{proj.name}" itemValue="#{proj.id}" />
<p:ajax event="change" process="#this" update="#form"
partialSubmit="true" />
</p:selectOneMenu>
</h:panelGrid>
</c3:filter>
</h:form>
The p:ajax call is fired, but no partial submission takes place. If i remove enclosing c3:filter, the submission works well.
How can I make this not skipping partial submission?
I have a Purchase datatable in a tab that lists all purchases. When you select a row, it is supposed to open a dialog that shows a list of the purchases for a particular customer. Also in the code there is a dialog for adding a new purchase in which a Customer can be selected from a list of previous customers in a datatable.
My problem is that when I select a row in the purchase table it is calling the rowSelect ajax event in the customer datatable (from inside the "New Purchase" dialog) instead of triggering it's own rowSelect event that opens the Purchase dialog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
<p:growl id="messages" showDetail="true" />
<h:form id="newPurchaseCommandForm" enctype="multipart/form-data">
<p:commandButton value="New Purchase" process="#this"
onclick="PF('newPurchase').show()" id="btnNewPurchase">
<f:actionListener binding="#{purchasesDAO.init()}" />
</p:commandButton>
</h:form>
<p:tabView id="tabView" dynamic="true" cache="true" scrollable="true"
style="font-size:12px;">
<p:tab id="tba1" title="Purchase List">
<h:form id="purchaseTableForm" enctype="multipart/form-data">
<p:dataTable id="PurchaseTable" var="purchaseVar"
rowKey="#{purchaseVar.id}"
selection="#{purchasesDAO.selectedPurchaseRow}"
widgetVar="purchasesTableSearch"
filteredValue="#{purchasesDAO.filteredPurchaseRow}"
selectionMode="single" value="#{purchasesDAO.purchaseList}"
style="font-size:10px;">
<!-- Opens dialog -->
<p:ajax event="rowSelect" listener="#{purchasesDAO.onRowSelect}"
update=":messages" oncomplete="PF('showPurchase').show()" />
...
</p:dataTable>
</h:form>
</p:tab>
</p:tabView>
<p:dialog header="Purchase Details" widgetVar="showPurchase"
id="dialog" resizable="true" modal="false" hideEffect="explode"
height="500" width="990">
...
</p:dialog>
<p:dialog header="Add New Purchase" widgetVar="newPurchase"
id="dialogNewPurchase" resizable="true" modal="true" hideEffect="explode"
closeOnEscape="true" height="600" width="900">
<h:form id="form-newcasedialog" enctype="multipart/form-data">
<p:dataTable id="CustomerTable" var="customer"
rowKey="#{customer.id}"
selection="#{purchasesDAO.selectedCustomerRow}"
widgetVar="purchasesTableSearch"
filteredValue="#{purchasesDAO.filteredCustomerRow}"
selectionMode="single" value="#{purchasesDAO.customerList}"
style="font-size:10px;">
<!-- Opens dialog -->
<p:ajax event="rowSelect" listener="#{purchasesDAO.onRowSelect3}"
process="#this" />
...
</p:dataTable>
</h:form>
</p:dialog>
</h:body>
</html>
The solution for this took me ages to find but it turned out to be a simple one-line typo.
The widgetVar for both the Customer table and the Purchases table were the same:
<p:dataTable id="CustomerTable" var="customer"
rowKey="#{customer.id}"
selection="#{purchasesDAO.selectedCustomerRow}"
widgetVar="purchasesTableSearch"
filteredValue="#{purchasesDAO.filteredCustomerRow}"
selectionMode="single" value="#{purchasesDAO.customerList}"
style="font-size:10px;">
Should be:
<p:dataTable id="CustomerTable" var="customer"
rowKey="#{customer.id}"
selection="#{purchasesDAO.selectedCustomerRow}"
widgetVar="customerTableSearch"
filteredValue="#{purchasesDAO.filteredCustomerRow}"
selectionMode="single" value="#{purchasesDAO.customerList}"
style="font-size:10px;">
This was caused by copy/pasting code during development and missing the widgetVar line when updating the code. Changing the widgetVar in the customer datatable to be different to the purchase table solved the problem.
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");
I have the following problem:
I have a button that should invoke a method, but the page should't get refreshed (I display a dialog based on bootstrap modal after clicking on the button and it vanishes otherwise). Therefore I use ajax to say that nothing should get rendered after clicking on the button.
I already used applied it before and it worked. But in the recent version of my code the method isn't invoked anymore as long as I use ajax. If I remove the ajax part the method is invoked as it should be, but the page gets refreshed and I don't want that.
My code:
<h:form>
<ui:fragment rendered="#{bean.condition1}">
<ui:include src="facelet1.xhtml" />
</ui:fragment>
<ui:fragment rendered="#{bean.condition2}">
<ui:include src="facelet2.xhtml" />
</ui:fragment>
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Before I had it like this and it worked:
<h:form>
<ui:include src="bean.faceletPath" />
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Thanks all,
/metalhamster
Edit:
facelet1.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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Value:">
<h:inputText value="bean.value">
</h:panelGrid>
</ui:composition>
</h:body>
</html>
facelet2.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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Text:">
<h:inputText value="bean.text">
</h:panelGrid>
</ui:composition>
</h:body>
</html>