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.
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 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!
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
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>
this is my 1st question here :)
My code is as follows:
<?xml version="1.0"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<h:head />
<h:body>
<h:form id="filterForm">
<h:outputStylesheet library="css" name="main.css" />
<div id="filterPane">
<h:panelGroup rendered="#{not empty filters.categories}">
<div class="filter">
<div class="filterCategories" style="width: 100%;">
<h4>Kategorien</h4>
<p />
<h:selectManyCheckbox layout="pageDirection"
value="#{filters.selectedCategories}"
valueChangeListener="#{filters.categoryValueChanged}">
<f:selectItems value="#{filters.categories}" var="category"
itemLabel="#{category.displayName} (#{category.count})"
itemValue="#{category.name}" />
<f:ajax render="#form" />
</h:selectManyCheckbox>
</div>
</div>
</h:panelGroup>
</div>
</h:form>
</h:body>
</f:view>
I get the same error as some others before me here #stackoverflow - but none of the suggested solutions worked for me.:
<f:ajax> contains an unknown id 'A5539:filterForm:j_idt9' - cannot locate it in the context of the component j_idt9
Before my switch from <p:selectManyCheckbox to <h:selectManyCheckbox the code was working fine.
We need to change to <h:selectedManyCheckbox, because the PrimeFaces variant is not selectable for a non-JavaScript user. I need the form <h:form id="filterForm"> to be re-rendered as a consequence of my AJaX request via the <f:ajax> element.
Beside the initial <f:ajax render="#form" /> I unsuccessfully tried to reference the <h:form id="filterForm"> element with the following variants:
<f:ajax render=":filterForm" />
<f:ajax render=":#{component.parent.parent}" />
I also tried some more stupid ones.
Any hint, anybody!? :)