This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 7 years ago.
What I would like to do is to update orderList in every time when checkbox has been (un-)checked.
My component is unaccessible with faces error. The component is inside form with id="form"
14:33:29,614 SEVERE [javax.enterprise.resource.webcontainer.jsf.application] (default task-9) Error Rendering View[/pages/view.xhtml]: javax.faces.FacesException: Cannot find component with expression ":form:orderList" referenced from "form:j_idt34:j_idt88:j_idt96:0:j_idt100".
I have tried several solutions including: :form, form, :orderList, orderList, form:panelGridChoice:orderList, :panelGridChoice:orderList, :form:panelGridChoice:orderList, :form:orderList
This is my view
<composite:implementation>
<h:outputStylesheet library="css" name="form.css" />
<h:outputScript>
replaceMedia();
</h:outputScript>
<ui:decorate template="answerDecorator.xhtml">
<ui:define name="additionalForms">
<h:outputText value="#{cc.attrs.question.additionalExplanation}" styleClass="text-normal" escape="false" />
</ui:define>
<ui:define name="component">
<p:panelGrid id="panelGridChoice" columns="1" cellpadding="0" styleClass="inline" columnClasses="" >
<p:dataTable var="answer" value="#{cc.attrs.question.possibleAnswers}">
<p:column headerText="#{msg['survey.question.chooseAnswerList']}" styleClass="thirty-percent">
<h:outputText value="#{answer.text}" />
</p:column>
<p:column headerText="#{msg['survey.question.chooseAnswer']}" styleClass="ten2-percent" >
<p:selectBooleanCheckbox value="#{answer.checked}" >
<p:ajax event="change" process="#this" update=":form:orderList" listener="#{cc.attrs.question.setCheckedAnswers}" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
<p:orderList id="orderList" value="#{cc.attrs.question.checkedAnswers2Order}" var="answer" itemLabel="#{answer.text}"
converter="entityConverter" itemValue="#{answer}" controlsLocation="left" >
<f:facet name="caption">#{msg['survey.default.makeOrder']}</f:facet>
</p:orderList>
</p:panelGrid>
</ui:define>
</ui:decorate>
</composite:implementation>
Where answerDecorator.xhtml is defined as
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5" styleClass="borderless survey-panel-max">
<h:outputText value="#{cc.attrs.question.questionText}" styleClass="text-header"/>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" styleClass="borderless top-alignment">
<ui:insert name="additionalForms" />
</h:panelGrid>
</h:panelGrid>
<ui:insert name="component" />
This can be really annoying, so in situations like this I usually target the components by style class. Try adding styleClass="orderList" to <p:orderList>, and target it with #(.orderList).
Related
I am trying to emulate the Primefaces Showcase to have a result set that uses filtering and a row expansion. I get errors whenever I try either one. The page loads without errors. In the code example, I have stripped the filtering to isolate the issue. It appears that any time an AJAX request is triggered it will give an error. The error is triggered when trying to use the row expansion as that uses an AJAX call to fetch the expanded row.
We are using Primefaces 8.0 on IBM Rad local server (Eclipse). Result set is pulled from DB2 using Hibernate and that part works.
Please help by suggesting why the AJAX fails everytime?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<ui:composition template="/template/maintemplate.xhtml">
<ui:define name="title">Search Results</ui:define>
<ui:define name="content">
<h:form id="formId">
#{searchResultsBean.init}
<p:dataTable id="parameterList" var="data"
value="#{searchResultsBean.parameterList}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column value="#{data.companyId}" >
<f:facet name="header">
<h:outputText value="Company ID" />
</f:facet>
<h:outputText value="#{data.companyId}" />
</p:column>
<p:column value="#{data.companyName}" >
<f:facet name="header">
<h:outputText value="Company Name" />
</f:facet>
<h:outputText value="#{data.companyName}" />
</p:column>
<p:column value="#{data.alertNumber}">
<f:facet name="header">
<h:outputText value="Alert Number" />
</f:facet>
<h:outputText value="#{data.alertNumber}" />
</p:column>
<p:column value="#{data.comment}">
<f:facet name="header">
<h:outputText value="Comment" />
</f:facet>
<h:outputText value="#{data.comment}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value"
style="width:300px">
<h:outputText value="Company ID" />
<h:outputText value="#{data.companyId}" />
<h:outputText value="Company Name" />
<h:outputText value="#{data.companyName}" />
<h:outputText value="Alert #" />
<h:outputText value="#{data.alertNumber}" />
<h:outputText value="Alert Description" />
<h:outputText value="$#{data.alertNumber}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Error received in console:
ReferenceError: ajaxWaitCursorOn is not defined
Specific error in primefaces generated javascript:
$(function(){PrimeFaces.cw("AjaxStatus","widget_j_id878804506_56ad391e",{id:"j_id878804506_56ad391e",delay:0,start:function(){ajaxWaitCursorOn()},success:function(){ajaxWaitCursorOff()}});});
Note 1: We tried changing it to use #Inject instead of calling the init method and got the same result.
Note 2: We verified that jQuery is loaded using a simple alert in the console.
The issue was this line above: template="/template/maintemplate.xhtml
It was loading a template file. We didn't make this, but copied it from another project. The template file had this line in for some reason: <p:ajaxStatus onstart="ajaxWaitCursorOn()" onsuccess="ajaxWaitCursorOff()" />
I am not sure if this answer provides value to anyone except for this: Check your template files if you have any.
I have a fileUploader which disappears after partial site refresh
Here is my xhtml file
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="/WEB-INF/templates/traleerdf-template.xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="content">
<f:metadata>
<f:event type="preRenderView"
listener="#{registration.loadRegistrationDetails()}" ></f:event>
</f:metadata>
<p:ajaxStatus onstart="PF('statusDialog').show();" onsuccess="PF('statusDialog').hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Saving"
draggable="false" closable="false">
<p:graphicImage value="/images/ajax-loader.gif"/>
</p:dialog>
<h:form id="form" enctype="multipart/form-data">
<p:panelGrid id="detail" columns="1" >
<p:dataTable var="reg" id="datatable" value="#{registration.registrationDTOs}" rows="12">
<p:column headerText="Name" style="width:5%">
<p:outputLabel value="#{reg.sourceName}"/>
</p:column>
<p:column headerText="Path Prefix" style="width:5%">
<p:outputLabel value="#{reg.pathPrefix}"/>
</p:column>
<p:column headerText="Template File" style="width:30%">
<p:commandButton id="templateButton" value="Get Template" oncomplete="tempDlg.show();" process="#this" title="Template File"
update=":topForm:form:growl :topForm:form:tempId">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
<p:column style="width:2%" headerText="Update">
<p:commandButton id="selectButton" update=":topForm:form:growl :topForm:form:display" process="#this" oncomplete="regDialog.show()" icon="ui-icon-search" title="Edit">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Registration Detail" widgetVar="regDialog" resizable="false" id="regDlg" showEffect="fade" hideEffect="explode" modal="true">
<p:panelGrid id="display" columns="2" style="margin:0 auto;" >
<p:outputLabel id="lblEndpoint" for="txtEndpoint" value="#{msg['Registration.Endpoint']}"/>
<h:outputText id="txtEndpoint" value="#{registration.registrationDTO.endpoint}"/>
<p:outputLabel id="lblSourceName" for="txtSourceName" value="#{msg['Registration.sourceName']}"/>
<p:inputText required="true" id="txtSourceName" value="#{registration.registrationDTO.sourceName}" requiredMessage="Source name not entered"/>
<p:outputLabel id="lblPathPrefix" for="txtPathPrefix" value="#{msg['Registration.pathPrefix']}"/>
<p:inputText disabled="true" required="true" id="txtPathPrefix" size="20" value="#{registration.registrationDTO.pathPrefix}" requiredMessage="Path prefix is required"/>
<p:outputLabel id="lblTemplateFile" for="txtTemplateFile" value="#{msg['Registration.templateFile']}"/>
<p:fileUpload required="true" id="txtTemplateFile" fileUploadListener="#{registration.uploadTemplateFile}" requiredMessage="Template File required"
mode="advanced" widgetVar="txtTemplateFile" value="#{registration.registrationDTO.templateFile}" update=":topForm:form:growl">
</p:fileUpload>
<h:panelGroup>
<p:commandButton icon="ui-icon-disk" id="btnUpdte" update=":topForm:form:growl :topForm:form:panel" ajax="true" action="#{registration.updateRegistration()}" style="margin-right:20px;"
value="Update" >
</p:commandButton>
</h:panelGroup>
</p:panelGrid>
</p:dialog>
<p:dialog header="Template Dialog" widgetVar="tempDlg" modal="true" height="100" showEffect="fade" hideEffect="explode">
<p:panelGrid id="tempId" style="margin:0 auto;" columns="2">
<p:outputLabel id="TemplateFileLbl" for="TemplateFile" value="#{msg['Registration.templateFile']}"/>
<h:outputText value="#{registration.registrationDTO.templateFile}" id="TemplateFile"/>
</p:panelGrid>
</p:dialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
The upload button will open a new dialog which allows the user to edit the fields and can upload a new template file.
My Problem is every time the upload button in the dialog is clicked, f:event method method is invoked which is expected as it is of type prerender but is there anyway to avoid this event call for the fileupload because it is overwriting the template file name I uploaded. (prerender method is making a call to db to get the list of details which in the case overriding the template file.)
From the namespaces you're using, I presume you're using JSF 2.2. In this version, you can have
<f:viewAction action="#{registration.loadRegistrationDetails()}"/>
The viewAction tag is not executed on postback by default.
I’m trying to update a part of my page using the following command:
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
When I click the button, the panel "createPanelDetailsAddress" is not updated. On the other side when I use update=":main_form”, the panel is updated (but all other panels inside the main_form are updated also)
The panel I want to update is included in a panel named “createPanel”.
Could anyone have idea why update=":main_form:createPanelDetailsAddress" doesn't work in my case ?
I use primefaces3.5 and Mojarra JSF 2.1.7
Here is the code I used:
public String initAddNewAddress(){
renderCreatePanelDetailsAddress = true;
return null;
}
<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" template="/template.xhtml">
<ui:define name="content">
<h:form id="main_form">
<p:panel id="createPanel" rendered="true">
<p:messages id="msgCreate" />
<p:panel id="createPanelDetails"
header="#{issuerMsgs['issuer.createArea.title']}">
<h:panelGrid border="0" columns="6">
<h:outputText value="#{issuerMsgs['issuer.issuerCode.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.issuerCode}"
label="issuer_issuerCode">
</p:inputText>
<h:outputText value="#{issuerMsgs['issuer.description.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.description}"
label="issuer_description">
</p:inputText>
</h:panelGrid>
</p:panel>
<p:spacer height="10" />
<p:panel id="panelListAddress"
header="#{addressMsgs['address.createArea.title']}">
<p:dataTable id="addresslist" var="address"
value="#{issuerComponent.addressList}" paginator="false" rows="10">
<p:column>
<f:facet name="header">
<h:outputText value="#{addressMsgs['address.tel.title']}" />
</f:facet>
<h:outputText value="#{address.tel}" />
</p:column>
</p:dataTable>
<p:spacer height="22" width="0" />
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
</p:panel>
<p:panel id="createPanelDetailsAddress"
header="#{addressMsgs['address.createArea.title']}"
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Your update will fail because
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"
will evaluate to false the first time the view is rendered. As a result the component is not in the DOM tree the first time the view is rendered.
Ajax updates work by locating a specific component (by id) in the DOM and replacing it with new markup. Your panel was never in the DOM to begin with, so there's nothing to update with ajax.
To remedy, you need to wrap the <p:panel/>with another component and make that component the target of your ajax update
<p:outputPanel id="container" layout="none">
<p:panel id="createPanelDetailsAddress" header="# addressMsgs['address.createArea.title']}" rendered="#issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:outputPanel>
I have this code, currently working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition 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"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton
value="Aggiorna"
actionListener="#{clientiController.aggiorna}"
update=":form:clienti"
icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton
value="Nuovo Cliente"
actionListener="#{clientiController.nuovo}"
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()" />
</h:form>
<h:form id="formDialog">
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
Now I'd really like my dialog to be modal, so I add modal=true to my .
The result is my dialog appears "under" the overlay.
After a bit searching, I found that appendToBody=true would solve my problem, so I try it and my dialog appears the right way.
But... WTF??! Buttons inside the dialog stop working!!
BUG? Or is there any solution?
Move <h:form id="formDialog"> inside the dialog
Because when you use appendToBody=true the content of the dialog being appended to the BODY of your page... And in you case its being taken outside the h:form and as you know commandButtons must reside within a h:form in order to work....
Like this
<p:dialog appendToBody="true".....
<h:form id="formDialog">
.....
When working with dialogs allays remember to place your h:forms inside the dialog...
Trying to do some simple primefaces datatable ajax work and get the following exception:
javax.servlet.ServletException: /default.xhtml #17,76 Parent not an instance of ClientBehaviorHolder: org.primefaces.component.datatable.DataTable#5fdb7adc
I'm using primefaces 3.3.1. My .xhtml code is here (I copied some of it from the primefaces site to see if I could get this working), anybody got any ideas?
<html xmlns="http://www.w3c.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" >
<h:head>
</h:head>
<h:body>
<center>
<h:form id="form">
<p:dataTable id="personTable" var="client" value="#{tableBean.persons}"
selection="#{tableBean.person}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onUserSelect}"
update=":form:displayf" oncomplete="carDialog.show()" />
<p:ajax event="rowUnselect"
listener="#{tableBean.onUserUnselect}"
update=":form:displayf" />
<f:facet name="header">
Click "View" button after selecting a row to see details
</f:facet>
<p:column headerText="Name">
#{client.name}
</p:column>
<p:column headerText="Address">
#{client.address}
</p:column>
<p:column headerText="Phone" >
#{client.phone}
</p:column>
</p:dataTable>
<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog" resizable="false"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="displayf" columns="2" cellpadding="4">
<h:outputText value="Name:" />
<h:outputText value="#{tableBean.person.name}" />
<h:outputText value="Address:" />
<h:outputText value="#{tableBean.person.address}" />
<h:outputText value="Phone:" />
<h:outputText value="#{tableBean.person.phone}" />
</h:panelGrid>
</p:dialog>
</h:form>
</center>
</h:body>
</html>