I am using Primefaces 3.5. I have the following code:
<p:panel id="containerSelectionPanel" header="Container Selection">
<h:form id="containerSelectionForm">
<p:selectOneMenu value="#{manageContainersBean.selectedContainer}">
<f:selectItems value="#{manageContainersBean.containerList}" var="container" itemLabel="#{container.name}" />
<p:ajax update=":componentSelectionPanel" />
</p:selectOneMenu>
</h:form>
</p:panel>
<p:panel id="componentSelectionPanel" header="Component Selection">
<h:form id="componentSelectionForm">
<p:galleria id="componentGallery" var="component"
value="#{manageContainersBean.selectedContainer.components}">
<p:graphicImage value="#{component.preview}" title="#{component.name}" alt="#{component.name}"></p:graphicImage>
</p:galleria>
</h:form>
</p:panel>
On startup of the website the gallery gets shown correctly. However, if I change the selection
in the SelectOneMenu the gallery is just empty (nothing gets shown, the panel for "Component Selection" itself is empty).
The updating through the AJAX request works. The list of components is retrieved upon update , the preview as well as name are requested as desired. However, the HTML code generated for the updated gallery contains very few lines, way less than when loading the gallery initially, see here:
<ul class="ui-galleria-panel-wrapper">
<li class="ui-galleria-panel ui-helper-hidden">
<img id="j_idt28" alt="Have lunch" title="Have lunch">
</li>
<li class="ui-galleria-panel ui-helper-hidden">
<img id="j_idt28" alt="Have brunch" title="Have brunch">
</li>
</ul>
As can be seen, the newly selected container is fetched, though and the images are somewhat updated (but the inital gallery contains way more code).
I already tried updating the complete form instead of only the gallery: same result. I tried moving the gallery out of the form itself: same result. I tried using a Javascript update from the Browser console as tried here, nothing happens.
Does someone have a solution to this problem?
Update: I checked the server response, that gets send when the gallery should be updated. It contains exactly the same code as the initial response (when the gallery works), so there must be something wrong with JSF during rendering the response. But still no clue on how to handle this.
Edit: general thing: the form should not be updated, but the complete panel.
Regards,
bobbel
I found the issue being reported here.
The temporary solution then is to modify the ajax request in the containerSelectionForm as follows:
<p:ajax
update=":componentSelectionPanel"
oncomplete="PrimeFaces.cw('Galleria','widget_componentSelectionForm_componentGallery',{id:'componentSelectionForm:componentGallery'}" />
In the call of PrimeFaces.cw() be sure to include galleria parameters like panelWidth in the object, that already contains the id.
Related
I am using primefaces autocomplete in my application to suggest userIds to the User.Once user enters three characters into the Autocomplete textbox my UserIds list will be suggested to the user to Autocomplete. As soon as user selects userId from List, I am updating the User First and Last name in the Output Text in the following format John Doe(jd123) with a Delete button beside to this name. As shown in comments in the code first ajax request is perfectly working fine.But When I am trying to delete name that I am printing using <h:outputText/> I am getting an error which is
javax.faces.FacesException: Cannot find component with identifier
"items" referenced from "j_idt34:0:imgid".
My Code :
<h:outputLabel value="Select user" for="acMinLength" />
<p:autoComplete id="acMinLength"
minQueryLength="3"
value="#{autoCompleteBean.txt2}"
completeMethod="#{autoCompleteBean.complete}">
<p:ajax event="itemSelect"
listener="#{autoCompleteBean.handleSelect}"
update="items"/> // First Ajax request perfectly working fine
</p:autoComplete>
<h:outputLabel value="selectedUsers" for="acMinLength" />
<h:panelGroup id="items">
<ui:repeat value="#{autoCompleteBean.printId}" var="item">
<h:outputText value="#{item}"/>
<h:graphicImage name="delete.png" library="images" id="imgid">
<p:ajax event="click"
listener="#{autoCompleteBean.updateList}"
update="items"/> // This is where i am getting exception
</ui:repeat>
<h:panelGroup>
I know I can update the parent component with child Ajax request. But I don't know what I am doing wrong.
it should be safer to update the h:form component. I'm not sure you can update every h: component by id. If you open the resulting xhtml and try checking the actual id path of the children components, you will see that the don't include the ids of all of their parent's component. Some id's are skipped
However, you can try this
update=":#{p:component('items')}"
Hope it helps
After a rigorous search I tried the answer posted by andre here(Primefaces - Cannot find component with identifier outside the datatable) and hurray it's working.
like this
update="#([id$=items])"
I'm using JSF 2.0 and Primefaces 3.2.
I'm using Facelets for templating, and I've built a 3-column layout:
Left column - mainContent column - Right column. Each column got it's own template xhtml file with ui:composition which I insert in a mainTemplate.
In the mainContent column I've got a info-button (p:commandButton):
<h:form id="mainForm">
<p:commandButton id="infoButton" value="Info" actionListener="#{faceletsAttachment.addInfo}"/>
</h:form>
But I want the info to show in the right column, with a
<h:form id="rightColumnForm">
<p:message for="infoButton">
</h:form>
This obviously does not work, because does not find the infoButton. Any idea how I can make this work? I tried
<p:message for="mainForm:infoButton">
too, but no cigar.
The reason I want to use a p:message is that I want the message to position itself on the y-position the infoButton has. If you got an alternative solution to how I can do this, I would also appreciate it.
If you are adding messages manually from server side you can do the following
<p:message id="myInfoButton" for="myInfoButton" />
and send messages from server to myInfoButton like this
FacesContext.getCurrentInstance.addMessage("myInfoButton ", new FacesMessage("My Message", "Some Text goes here..."));
also add :rightColumnForm id to update of the <p:commandButton id="infoButton"
I need you to recommend me a JSF component that can help in the following scenario(I will first paste an image that will help me explain):
This page that you see in the image is a registration page, each of the panels have different fields and gadgets, when the register button is clicked, a new user is saved into the database.
The problem i have is in the show buttons. The buttons on top of each panel when clicked should display one panel and hide the other, but they must not trigger the field validation.
I use field validation by the attribute "validator"(in combination with a backing bean method) that most of JSF input fields have.
Currently everything that you see there is inside one h:form.
-what should i do to display a panel and hide the other without triggering the validation of the panel that is hiding?
-Is there another alternative to the h:commandLink or h:commandButton(they trigger the validation)?
-Putting each panel in a different h:form can do the trick?(Is that permited?)
-What do you think would be the best approach?
Use p:tabView Of primefaces, then put your contents(registration panels) in separate tab, use separate form for both of the tab, it will solve your problem....
e.g.
<p:tabView>
<p:tab title="panel1">
<h:form id="form1" prependId="false">
<h:inputText label="Sample Label"/>
<p:commandButton value="register"/>
</h:form>
</p:tab>
<p:tab title="panel2">
<h:form id="form2" prependId="false">
<h:inputText label="Sample Label"/>
<p:commandButton value="register"/>
</h:form>
</p:tab>
</p:tabView>
-what should i do to display a panel and hide the other without triggering the validation of the panel that is hiding?
Use two h:form
s there another alternative to the h:commandLink or h:commandButton(they trigger the validation)?
to make POST you must only use them
I would have used rich:modalpanel for this purpose
For the panel's toggle, Why don't you use JavaScript?
<h:commandButton value="Show panel 1" onclick="$('#panel1').hide();$('#panel2').show();return false;"/>
The return false will restrict the page from submitting, hence page won't refresh and since no data is posted back to server, validation phase will never execute.
Bottom line : IMHO this can be handled at client side itself.
You are aware of the immediate attribute, allowing to refresh without changing data.
Unfortunately it doesn't remember changes entered, so you might end up in the validation explicitly being done in your action instead of by JSF itself.
I use richfaces in my project and particularly the tag rich:modalPanel which allows to display popups in pages.
So to do this, I include my popup like this:
<ui:include src="popup.xhtml" />
This popup contains this code:
<rich:modalPanel id="sra" width="400" autosized="true" left="100" >
...
</rich:modalPanel>
Finally to display the popup, I do this in the main page:
<a4j:commandLink id="linkSRA" value="#{msg['SRA']}" action="#{controller.checkSRA}" oncomplete="#{rich:component('sra')}.show()" />
All work fine but my problem is the next:
In a page, I have many popup and each popup is included in the main page. The weight of this one is very big for nothing. So, how can I do to load the popup's content in ajax when I want to load a popup ?
Thanks
Re-render the panel content via some action and then open the modal in oncomplete=".."
I have write a little article : "How to create a stateful Richfaces popup" where I show how to create a popup controller. This popup controller allows to replace all the modal tags with a few lines :
<a4j:outputPanel binding="#{popupController.popupContainer}" id="popupContainer">
<c:forEach items="#{popupController.popups}" var="popup">
<f:subview id="popupView#{popup.id}">
<ui:include src="#{popup.uri}">
<ui:param name="popupBean" value="#{popup.popupBean}"/>
</ui:include>
</f:subview>
</c:forEach>
</a4j:outputPanel>
The article is available here. Sorry, it is too long to be paste directly here.
Found strange problem, possibly bug.
I have 2 identical web-pages with Richfaces:suggestionbox.
On the first one my suggestionBox is doing well, everything works fine, but on another one i have some problems. SuggestionBox doesn't show my suggestions. In logs i have something like this:
WARNING: No component found to process as 'ajaxSingle' for clientId remains-form:konta-suggest
2010.1.9 12:02:29 org.ajax4jsf.component.AjaxViewRoot processPhase
Any conclusions?
UPD:
<h:inputText value="#{repobean.kont}" id="kont" label="Payer" style="width:230px;"/>
<rich:suggestionbox onobjectchange="printObjectsSelected(#{rich:element('konta-id')}, #{rich:component('konta-suggest')}, 'id');" usingSuggestObjects="true" width="230" var="result" fetchValue="#{result.kont}" suggestionAction="#{kontabean.suggest}" id="konta-suggest" for="kont">
<h:column>
<h:outputText value="#{result.kont}"/>
</h:column>
<h:column>
<h:outputText value="#{result.kontName}"/>
</h:column>
</rich:suggestionbox>
<h:inputHidden id="konta-id" value="#{repobean.kontId}" />
Javascript inside onobjectchange is a function which prints id into konta-id.
The code of jsp on the second page is copy-pasted from the first page.
I know, the question is 5 years old, but we had this same error (with different components)
In our case we have changed the outer ui:repeat to an a4j:repeat.
After that, our components worked as expected.
What you can do, when you encounter Ajax problems, is to add the <a4j:log> component:
<a4j:log popup="false"/>
This will create a box in your page with all the Ajax logs from Richfaces. Eventually, you can set popup="true" and then display the popup by Ctrl + Shift + L
There are many logs in this panel, but generally the important things to look at is the WARN or ERROR messages.
Other concern about your error message: it is talking about some ajaxSingle processing. In your JSF code, you have no ajaxSingle attribute defined. When does this error happens? When you start typing some characters in your inputText component?
Isn't there any conditional rendering (rendered="#{some expression}") around this input and suggestion components? Or an iteration?
Does .suggest() action get invoked before this error?
Situations like you've described happen when an action-related (causing) component is within a conditional render (or an iteration) which does not allow a component to be created on RestoreView phase. Then action is not called at all and component-id is not found in the component tree.
Example: if you have something like this:
<h:panelGroup rendered="#{not empty myBean.valueSetInActionHandler}">
<h:commandLink id="action1" action="#{myBean.callOtherAction" value="appears after action"/>
</h:panelGroup>
<h:commandLink id="action2" action="#{myBean.setValueInActionHandler}" value="display button above"/>
First render - only one, second button is rendered. If setValueInActionHandler sets some value and displays the same page - first button ("appears after action") will get rendered too. But clicking it won't fire a callOtherAction - because on second request, during RestorePhase valueInActionHandler is empty again, so action1 will not be available...
Hope I managed to make myself clear :)
I think a4j taglib is missing on the page.