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.
When I try to render a panelGroup by an ajax call, it gives unknown id.
<h:form id="form1" prependId=false>
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render="panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
When I tried this code, it gives unknown id panel1. I tried with id ":panel1" too. I get the same error.
A relative client ID (i.e. not starting with :) is relative to the current parent NamingContainer component. The <ui:repeat> is also a NamingContainer. So the render="panel1" is looking for the component within the context of <ui:repeat>. This isn't going to work. An absolute client ID (i.e. starting with :) is looking for the component within the context of view root. But you've it inside a <h:form> -which is in turn another NamingContainer component-, so the render=":panel" is also not going to work.
The following should work, with prependId="false" removed so that you can refer it:
<h:form id="form1">
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
By the way, if you actually want to render only the table, then you should be doing this:
<h:form id="form1">
<h:panelGroup>
<h:dataTable id="table1" />
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:table1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
Update: as per the comments, it turns out that you have changed the JSF default NamingContainer separator character from : to _ by configuration. In that case, you need to use _ instead of : in the client ID selector.
<f:ajax execute="#form" render="_form1_panel1" listener="#{bean.page}" />
<ui:repeat value="#{interaction.interactionListBean}" var="interactionItr">
<h:commandLink value="#{interactionItr.interactionDate}" styleClass="#{interaction.createImage}" style="margin:0 5px 5px 0!important; display:inline-block;"><br/>
<f:ajax render=":formId:interactionDate :formId:category :formId:activity :formId:status :formId:channel :formId:status1 :formId:caseId :formId:comment :formId:user1 :formId:team :formId:user :formId:transit "
listener="#{interactionController.interactionDetailGet}"/>
<f:param name="RefId" value="#{interaction.interactionRefId}"/>
</h:commandLink>
</ui:repeat>
problem :
please refer above with above code their is no exception on console but the ajax listerner will not invoke when I saw this post similiar kind of concept being use just I was place the exceute="#form" then my coding is working fine
solution:
execute="#form"
Related
I've been struggling with this for two days with no success and I think it's already time to ask for your help. But first of all, this is what I'm using:
JSF 2 Mojara 2.1.1
Primefaces 3.4.2
Netbeans 7.1.1
Tomcat 7.0.37
And now, the problem: I have a main page which is composed by several other pages using several <ui:include .. /> tags, like this:
<ui:composition template="/resources/templates/template1.xhtml">
<ui:define name="appData">
<p:panelGrid columns="1" id="contenidoAplicacion" styleClass="noborder">
<h:form id="fNewPerson">
<p:panel header="New employee" style="min-height:40em">
<ui:include src="./forms/personal.xhtml" />
<p:accordionPanel styleClass="noborder" activeIndex="3">
<p:tab id="tabSomeData" title="Identidad profesional" >
<ui:include src="./forms/formSomeData.xhtml" />
</p:tab>
....
....
</ui:define>
</ui:composition>
The personal.xhtm file looks like this:
<p:panelGrid>
<p:row>
<p:column >
<h:outputLabel value="Field1"/>
<p:inputText label="Field1" id="field1" value="#{dataBacking.selectedPerson.field1}" tabindex="1"
required="true" size="10" >
<f:convertNumber for="field1" integerOnly="true" groupingUsed="false"/>
</p:inputText>
<p:inputText id="field2" value="#{dataBacking.selectedPerson.field2}" tabindex="2" required="true" size="1" maxlength="1" >
<p:ajax event="keyup" listener="#{dataBacking.check}"
process="field1 field2" partialSubmit="true"
update="field1 field2 photo"/>
</p:inputText>
</p:column>
<p:column rowspan="5" >
<p:graphicImage id="photo" value="#{dataBacking.selectedPerson.photo}" width="90" />
</p:column>
</p:row>
...
</p:panelGrid>
The check() method in the dataBacking class is irrelevant because it only checks if the field1 and the field2 meet some rules and it works properly. The problem comes when the main page is loaded for the first time. In that case, the <p:ajax /> component in personal.xhtml doesn't work. I have to reload the page (simply by pressing the F5 key) and this time it works as it would be expected.
I've been changing some attributes of the component, but nothing seems to work. I really don't know what else to do. Any kind of help will be apreciated.
EDITED. After one more day, I think the problem has nothing to do with Primefaces ajax component, as the title of the question suggested. I've come to this conclusion through these two facts:
The behaviour with the <f:ajax .../> component remains the same.
I've figured out that the view relative to the first time I load the page is not persisted. I'll try to explain myself.
The DataBacking class has defined its scope as view so that the page can "see" all the attributes and methods during the time it's been shown to the user. However, I've noticed that the constructor is called twice: the first time the page is loaded (and then, none of the methods of the class are successfully invoked) and when I refresh the page. In this last case, the behaviour of both the page and the class is the expected one.
I'm getting <f:param> i.e., menuItemIndex value as null during my ajax call. Is it because it is with in <h:graphicImage> ??? Can any one suggest please? Note: Parameter is getting passed if I use <h:commandLink> instead of <h:graphicImage>.
<c:forEach items="#{cc.attrs.value}" var="menuItem" varStatus="loopItem">
....
<ui:fragment rendered="#{menuItem.hasChildren}">
<h:graphicImage library="images" name="#{menuItem.symbol}">
<f:ajax render=":fatcaForm:myMenu:menuID" event="click" listener="#{menuBean.refreshMenu}" />
<f:param name="menuItemIndex" value="{loopItem.count}" />
</h:graphicImage>
</ui:fragment>
....
</c:forEach>
The <h:graphicImage> is not a command component and it does therefore not support <f:param> children at all. The <f:param> works only when nested in an UICommand component, such as <h:commandLink> as you found out yourself.
So, this should do:
<h:commandLink action="#{menuBean.refreshMenu}">
<h:graphicImage library="images" name="#{menuItem.symbol}" />
<f:ajax render=":fatcaForm:myMenu:menuID" />
<f:param name="menuItemIndex" value="#{loopItem.count}" />
</h:commandLink>
(note that I fixed the EL syntax error in the <f:param value> as well)
Unrelated to the concrete problem, how you used the <h:graphicImage library> is not entirely right. Please carefully read What is the JSF resource library for and how should it be used?
I am calling a method on the click of link. The following code works ajaxfully
<ui:repeat value="#{myBean.names}" var="name"
varStatus="idx">
<li>
<h:commandLink value="#{name.label}">
<f:ajax execute="#this" event="click" render="#all" listener="#{myBean.changeActiveName}" >
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
But when I try to pass parameter to the Ajax call it starts refreshing the whole page
<ui:repeat value="#{myBean.names}" var="name"
varStatus="idx">
<li>
<h:commandLink value="#{name.label}">
<f:ajax execute="#this" event="click" render="#all" listener="#{myBean.changeActiveName}" >
<f:param name="idx" value="#{idx}" />
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
What is wrong with this code?
The <f:param> has to be a child of the parent UICommand component, not of <f:ajax>.
<h:commandLink value="#{name.label}">
<f:param name="idx" value="#{idx}" />
<f:ajax listener="#{myBean.changeActiveName}" render="#all" />
</h:commandLink>
(note that I removed the execute and event attributes as your definitions are the defaults already; plus I wonder how it's useful to send a whole IterationStatus instance as request parameter ... maybe you just wanted to send the index instead? Use #{idx.index} instead or so)
See also:
How can I pass selected row to commandLink inside dataTable? (although this treats <h:dataTable>, exactly the same answer applies to <ui:repeat> as well)
I have a problem with PrimeFaces p:selectOneMenu component when I try to update a p:dataGrid by changing the SelectOneMenu's value.
Xhtml:
<p:selectOneMenu value="#{bussinessOwnersViewerMB.selectedCity}" effect="explode">
<f:selectItems value="#{bussinessOwnersViewerMB.cities}" var="city" itemLabel="#{city.cityName}" itemValue="#{city.cityId}"/>
<p:ajax listener="#{bussinessOwnersViewerMB.handleCityChange}" update="mainform:bolist"/>
</p:selectOneMenu>
<p:dataGrid id="bolist" var="bo" value="#{bussinessOwnersViewerMB.bOwners}" columns="3" rows="#{bussinessOwnersViewerMB.os}">
<p:column>
<p:panel header="#{bo.bOName}">
<h:panelGrid columns="1">
<p:graphicImage value="/resources/images/#{bo.boType}/#{bo.bOId}/mainProfile.jpg"/>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
The problem is, when I change the selectOneMenu's value at the first time the datagrid doesn't get updated. What happen is only the postconstructor method is called, after the first change it works fine.
My managed bean is a viewscoped managed bean.
The listener method "bussinessOwnersViewerMB.handleCityChange" is :
public void handleCityChange(ValueChangeEvent event) {
bOwners = bovb.loadAllDistributerByType(new Integer(selectedCity)); // selectedcity is the selected item id
os = Integer.toString(bOwners.size());
}
In the past you couldn't update a dataGrid like that; you had to wrap it in a panelGroup. I don't know wether or not that has changed, but I still do it like that and it still works. So just put your dataGrid inside a panelGroup and update the panelGroup (instead of the dataGrid) in your ajax tag.
In my case the problem was generated by a <p:panel> that contains a <h:panelGroup>, so the partial submit using <p:ajax> did not work. This problem happen when in the form there are empty fields which has required=true.
I updated the <p:panel> in <h:panelGroup>.
From:
<p:panel ... >
...
<h:panelGroup ...>
<!-- Form inside -->
</h:panelGroup>
...
</p:panel>
to
<h:panelGroup ... >
...
<h:panelGroup ...>
<!-- Form inside -->
</h:panelGroup>
...
</h:panelGroup>
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 4 years ago.
<p:dataTable id="id" value="#{bean.soemList}" var="account">
<p:commandLink value="#{account.id}" action="#{bean.methodCall}"
update="dialogID" oncomplete="dlg1.show();">
</p:commandLink>
...
<p:dialog header="#{i18n.details}" widgetVar="dlg1" modal="true" height="200" width="600">
<h:panelGroup id="dialogID" layout="block">
<h:outputLabel value="#{bean.var1}"></h:outputLabel>
</h:panelGroup>
</p:dialog>
p:dialog gets updated when the link is outside p:dataTable, but when the link is placed in p:dataTable, p:dialog doesnt show updated value. I need to keep the link in p:dataTable.The component to be updated is not in dataTable.
I have only been able to get a <p:commandLink> within a dataTable to update a component of a dialog if the elements of that dialog were within their own <h:form>.
Example:
<p:dialog appendToBody="true" ...>
<h:form id="dialogForm" ...>
...
</h:form>
</p:dialog>
<p:dataTable ...>
<h:form id="dataTableForm" ...>
...
</h:form>
</p:dataTable>
Also note that I added to the dialog the attribute, appendToBody="true". This is important for locating the dialog by id after an AJAX update.
Hi did you try to append the form id as follows
<form id="myformid">
.....
<p:commandLink value="#{account.id}" action="#{bean.methodCall}" update=":myformid:dialogID" oncomplete="dlg1.show();">
</p:commandLink>
....
<p:dialog header="#{i18n.details}" widgetVar="dlg1" modal="true"
height="200" width="600">
<h:panelGroup id="dialogID" layout="block">
<h:outputLabel value="#{bean.var1}"></h:outputLabel>
....
</form>
Hope it helps !