I was trying to show messages using a p:growl like this.to be updated on the OnRowSelect Method of a Data Table lazy loading like this
<p:growl id="applyMessages" showDetail="false" global="true" /> and <p:ajax event="rowSelect" listener="#{editBean.onRowSelect}" update=":studyPlanEditForm:display applyMessages"/>
but got the error like this
Cannot find component with identifier "applyMessages" in view.
Please Help.
Check the source code of your page in browser. Then identify the p:growl markup and its generated client-id. It surely is longer than applyMessages and has a prefix similar to containerID:applyMessages. Use this id in your update attribute of the ajax call.
Related
I am trying to build a dynamic layout for a form in JSF. It should generate a dynamic number of select fields, based on the values that come from "classifyingOptions", which is of type: Map(Object, List(Object)).
I first tried to use ui:repeat to iterate through the map, but I couldn't since the EL for the u:select and f:selectItems are evaluated when the view is built and is invalid since it relies on a variable only made available by the ui:repeat during rendering.(source for the explanation here
So i switched to using c:forEach.
<c:forEach items="#{action.classifyingOptions}" var="current" varStatus="i">
<h:panelGrid columns="2">
<u:select label="#{current.key.value}" id="select_#{i.index}" value="#{action.selectedOption}"
readonly="#{i.index != 0 ? !action.isSelected.get(i.index -1) : false }"
valueChangeListener="#{action.classifyingOptionChanged}" immediate="true">
<f:selectItems value="#{current.value}" var="option" itemValue="#{option.key}" itemLabel="#{option.value}" />
<a4j:ajax event="change" render="#form" execute="#this" />
</u:select>
<h:panelGroup />
</h:panelGrid>
</c:forEach>
I can read the map and show the select fields. The requirements is that when the first of the fields is selected, the next field needs to be enabled using an ajax call.
The problem is that an error is thrown on the sever once I select an option for the first field:
16.05.16 16:46:25:267 EEST] 0000006f FaceletViewDe E Error Rendering View[/pages/details.xhtml] java.lang.IllegalStateException: component with duplicate id "j_id142" found
In the browser, i get this message as part of the response that threw the error: This page contains the following errors: error on line 23 at column 230: Extra content at the end of the document
Below is a rendering of the page up to the first error.
So I used both ui:repeat and c:forEach, but none of them was able to work properly. Can you check where my mistake is? Or do you know any different approach?
Thank you!
Issue Solved. I used f:ajax instead of a4j:ajax
I got a list with steps which I displays as follow:
<ul >
<for:forEach id="steps" items="#{RecipeBean.recipe.steps}" var="step">
<li> <com:Step description="#{step.stepDescription}"/></li>
</for:forEach>
</ul>
<p:commandButton id="addstep" value="#{msg['step.add']}" action="#{RecipeBean.addStep}" update="steps" />
The button addStep adds a Step to the RecipeBean.recipe.steps collection. Now the new added step should be displayed. But like that I get the error message Cannot find component with identifier "steps" referenced from "j_idt8:addstep" and this is probably of the for:forEach component.
So does someone know how I can fix this issue?
The update attribute of the <p:commandButton> component should point to a component. Since <for:forEach> is not a component, but a taghandler, you receive an error message.
I would suggest you take a look at the existing PrimeFaces components like DataList, which presents a list objects in unordered format.
Then, you can refactor your code as follows:
<p:dataList id="steps" items="#{RecipeBean.recipe.steps}"
var="step" itemType="disc">
<com:Step description="#{step.stepDescription}" />
</p:dataList>
<p:commandButton id="addstep" value="#{msg['step.add']}"
action="#{RecipeBean.addStep}" update="steps" />
I am getting "Cannot find component with identifier "contentForm:tabView:form:addressDialogPanel" referenced from "contentForm:tabView:form:addressBookTable" " error. How can I update my panelGrid inside the widget?
<h:form id="form">
<p:dataTable id="addressBookTable">
<p:ajax event="rowSelect" listener="#{addressBookController.onRowSelect}"
update="contentForm:tabView:form:addressDialogPanel" oncomplete="addressDialog.show()" />
</p:dataTable>
<p:dialog id="addressDialogId" widgetVar="addressDialog">
<h:panelGrid id="addressDialogPanel" columns="2" cellpadding="4">
</h:panelGrid>
</p:dialog>
</h:form>
The main problem is that you are giving the wrong client ID of component's. Also p:tabView is a component it is not a form. When you define a h:form, it generates a standart HTML form element. And when you submit the page JSF uses POST to submit your data into backing bean. So nesting them is going to occur lot's of issues that you don't expect. You should seperate forms into sections like sideForm or searchForm or etc.
You should detect the correct client ID of your component when you try to update it. You can do this with your browser's developer settings(press f12 for chrome). Then select component with the magnifier button and give that ID into update property. Just like here:
You should read to learn basics of JSF for example from here
I have an editable dataTable in PrimeFaces and am using the Hibernate Validator for bean validation. This works fine with a <p:inputText /> element. Now I want to have validation on a dataTable which is editable.
This is what is happening:
If I enter valid values, the page updates as expected
If I enter invalid values, when I click the little "save" check mark nothing happens - the cell remains editable, database write is not attempted, no error message is displayed.
There is an <h:messages /> tag on the page, so why doesn't an error message show up? The component appears to be aware there was a problem since the row remains in the editable state.
EDIT: I enabled logging and saw this:
21:20:43,874 FINE [javax.enterprise.resource.webcontainer.jsf.context] (http-localhost-127.0.0.1-8080-2) Adding Message[sourceId=demoTable:j_idt11:2:j_idt15,summary=Testing Hibernate Validator Error Message)
So it looks like the context is being correctly updated. It seems like I need to do something to trigger the message it render.
Use the belowfollowing statement in your jsf file and it should work:
<p:messages id="messages" showDetail="true" autoUpdate="true"
closable="true" showSummary="false"/>
I writed an ajax request for any data. But the data don't work with h:inputHidden.
I think it's a bug of Primefaces.
But I don't know how to get the data now.
code:
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
...
<p:commandButton id="getData" action="#{buttonAction.getButtonData}" update="buttonData" />
When I click the commandButton, the value of don't work.
But if I use the h:outputText, it worked.
My requirement:
Before click the commandButton, I have create any html buttons dynamically. I want to click the commandButton and update the name and position of html buttons. So that I must get any data and update the html buttons with Javascript.
how could I do about it?
If I want to use the JavaScript to get the ajax data, how to do it. I see the document and find two method: jsf.ajax.request() and Primefaces.ajax.AjaxRequest(). But I don't know how to use the two method. for example: Primefaces.ajax.AjaxRequest("test.xhtml",,). The "test.xhtml" how to request the method testMethod of TestAction?
use firebug to inspect html code. you can see new value
<h:form id="form">
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
<p:commandButton id="getData" value="button"
action="#{buttonDataBean.buttonAction}" update="buttonData" />
</h:form>
If your problem does not get solved with primefaces ajax, you can use the native ajax provided by jsf have a look at it.It works, i have done many such things with it.
Instead of using a hidden input you could take advantage of JSF and use a f:param or f:attribute.
Read this really fine article, under the brand of BalusC: http://balusc.blogspot.com/2006/06/communication-in-jsf.html .