I want to conditionally render my menuitem depending on which element I invoke my menu on.
Only problem is: The menuitem renders the moment the xhtml is loaded. Because of that, I'll only get "null" for my selected element.
Of course I can catch that by saying "if it`s null, just render it", but the real problem is that, once rendered, the menuitem stays rendered.
Is there any way to render/re-render my menuitem right AFTER I open the menu(by then I'll have the information needed)?
I've tried several ways to aquire this:
remoteCommand (I don't need to invoke any bean, so it seems to be the wrong tool)
PageReload(Will obviously close my menue)
Ajax(Might work, but I just started learning it -> In this case it did nothing)
EDIT:
Ajax does work. I've updated the code. Right now im re-rendering the contextMenue once I've selected an item, so the children will call their respective beans again and render correctly.
Only flaw is:
This takes for to long (guess this would lead to another question...)
I don't want to re-render the menue, but the children! If I re-render the children directly, ajax can't find them by id anymore, so it will crash.
Any ideas?
test.xhtml
<p:contextMenu for="treeId" ajax="false" id="openSP">
<p:menuitem value="Example" ajax="false"
action="#{MyClass.method}"
rendered="#{MyClass2.renderItem}" >
</p:menuitem>
</p:contextMenu>
<p:treeTable id="test"
...
<f:ajax event="select" render="openSP" />
...
</p:treeTable>
Related
I am having a problem with my JSF project, where I am using PrimeFaces Mobile. This page has several pm:views
I have a list of radio buttons, which looks like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter"
onchange="submit()"
valueChangeListener="#{bean.elementChanged}">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
</p:selectOneRadio>
My valueChangeListener looks like this:
public void elementChanged(ValueChangeEvent e) {
currentElement = (Element) e.getNewValue();
System.out.println(getCurrentElement().getElementName());
}
The problem is, whenever I click on a radio button element, my page completely reloads to the start view, which has to do with the onchange="submit()". I have also tried f:ajax elements, but this doesn't seems to be working with my radio buttons, because I can't click them when I use this.
Is there a possiblty to just submit my current form or pm:view (without the f:ajax)?
PS: I have also tried exactly this on a single PrimeFaces Mobile page, which completely worked, since the application just consisted of one page.
When using PrimeFaces components, you should be using <p:ajax> instead of <f:ajax>. Just get rid of the onchange="submit()". This indeed invokes a synchronous (non-ajax) form submit which totally explains the page reload. You also need to replace valueChangeListener by <p:ajax listener>. The valueChangeListener is the wrong tool for the job whereby you're merely interested in invoking a JSF action method when the newly selected value is being set.
All in all, the rewrite should look like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
<p:ajax listener="#{bean.elementChanged}" />
</p:selectOneRadio>
Don't forget to remove the ValueChangeEvent argument from the elementChanged() method. In order to access the selected value, just access the currentElement property directly.
See also:
When to use valueChangeListener or f:ajax listener?
I need to trigger an ajax update upon change to a text box, which is a <p:autoComplete> component. I have observed that if the user opts to type the text manually, the event is a change, whereas if the user clicks one of the suggestions for the autocomplete, the event is itemSelect. So I added two <p:ajax> children to the input, each calling the same method and having the same update list, but one having event="change" and the other event="itemSelect".
However, I now discover something odd. For example, while in normal server mode I opened my page and typed "12". The autocomplete offered "1233" and "1234" as suggestions. I clicked "1233" and seemingly nothing happened. I clicked again and everything else filled in.
Repeat this in the debugger with a breakpoint on the event handler, and I can see that after the first click, the value is "12" and on the second click, it becomes "1233".
By switching commenting out the two different <p:ajax> I can see the different consequences. Without the "change" one, the handler is never called if the user selects an autocomplete suggestion, and without the "itemSelect" one, the handler is never called if the user types manually. But with both of them, there are two calls, and I'm sure there will be complaints about the double-click.
Some pseudo-code for those that like, first the xhtml:
<p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}"
required="true" completeMethod="#{myBacker.idAutoComplete}">
<p:ajax event="itemSelect" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
<p:ajax event="change" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
</p:autoComplete>
<h:panelGroup id="beanDetails">
<h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}">
<h:outputText value="#{myBacker.myBean.institutionName}" />
<!-- Continues with address, phone, etc.. -->
</h:panelGroup>
</h:panelGroup>
Then the Java backing bean code:
public void idChangeEventListener() {
myBean = myDAO.getDetails(myBean);
// another couple of init-type method calls
}
Give the parent tag a widgetVar attribute, then add this little attribute to the <p:ajax event="change" ...> child tag:
onstart="if(widgetVarName.panel.is(':visible')) return false;"
When the question was written, we were on PrimeFaces version 3.5, if I recall correctly. Since then, we need to update the solution to:
onstart="if(PF('widgetVarName').panel.is(':visible')) return false;"
with thanks to mwalter for pointing out the change.
I currently have a giant ui:repeat. Within this ui:repeat, some of the repeated objects have a url to a popup image associated with them. When someone clicks display under that particular object, I need the url to popup in a p:dialog.
<ui:repeat var="thing" value="#{bean.thingList}">
<p:commandLink value="details" onclick="miniImage.show();"
update=":#{p:component('chart')}"
action="#{bean.setCurrentImg(thing.imageUrl)}"
rendered="#{thing.includeImage}">
</p:commandLink>
</ui:repeat>
and at the bottom of the page:
<p:dialog id="chart" widgetVar="miniImage" >
<h:graphicImage value="#{bean.currentImg}"/>
</p:dialog>
And in the backing bean I tried using a simple setter and getter for currentImg.
I am a bit confused on this now and would like to accomplish this without having to submit the entire form as well. Any help is greatly appreciated.
If you're using PrimeFaces 3.3 or newer, you could just add partialSubmit="true" to the command component. You can then control the to-be-processed components in process attribute. In this particular case, just the current component (the command component itself) is sufficient, thus so process="#this":
<p:commandLink ... process="#this" partialSubmit="true" />
This way only the request parameters which are really necessary for the process will be sent.
Unrelated to the concrete problem, I suggest to use oncomplete instead of onclick to open the dialog. Otherwise the dialog is opened before update takes place and may cause poor user experience as the enduser would see the image instantly changing.
I have a problem with these two commandButton : Join and Leave.
I want to hide Join if I click on leave and vice-versa.
When I put ajax on false, there is no problem (but all the page is refresh and I don't find this optimal).
But when ajax attribut is on true with specific updating (cf comment in the code), the rendering is good but the new button whitch appear become inactive. If I click on it, nothing happens (well it's seems the actionListener trigger but the view is not refreshed, I have to manual refresh to see the difference)
Thanks for reading.
<h:form id="formWaitingList" rendered="#{connexion.connected}" >
<p:commandButton id="Join"
actionListener = "#{connexion.joinWaitingList()}"
rendered="#{!connexion.waiting}"
ajax="false"
<!-- ajax="true"
update="Join,Leave"-->
value="Join"/>
<p:commandButton id="Leave"
value="Leave"
ajax="false"
<!-- ajax="true"
udpate="Join,Leave"-->
rendered="#{connexion.waiting}"
actionListener ="#{connexion.leaveWaitingList()}" />
</h:form>
It seems that you're not entirely familiar with HTML/JavaScript. You know, JSF is basically a HTML/JavaScript(/CSS) code generator. Ajax updating works basically like this in JavaScript:
After sending the ajax request to JSF via XMLHttpRequest, retrieve a XML response which contains all elements which needs to be updated along with their client IDs.
For every to-be-updated element, use document.getElementById(clientId) to find it in the current HTML DOM tree.
Replace that element by new element as specified in ajax XML response.
However, if a JSF component has not generated its HTML representation because of rendered="false", then there's nothing in the HTML DOM tree which can be found and replaced. That totally explains the symptoms you're "seeing".
You basically need to wrap conditionally rendered JSF components in a component whose HTML representation is always rendered and then reference it instead in the ajax update.
For example,
<h:form>
...
<h:panelGroup id="buttons">
<p:commandButton ... update="buttons" rendered="#{condition}" />
<p:commandButton ... update="buttons" rendered="#{not condition}" />
</h:panelGroup>
</h:form>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
I have a simple problem where I want to display a popup if something went wrong in my managed bean.
The bean holds a list of exceptions that can be raised, with getter/setter methods.
The xhtml looks like this
<rich:panel>
<h:form>
<a4j:commandButton value="Compute Mission"
action="#{missionHandler.generateMissionFeasability}"
render="popupPanel">
</a4j:commandButton>
</h:form>
</rich:panel>
<rich:popupPanel id="popupPanel" modal="true" autosized="true"
resizeable="false" moveable="false" rendered="#{not empty missionHandler.exceptions}">
<f:facet name="header">
<h:outputText value="Exceptions raised during the processing " />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popupPanel')}.hide();return false;">
</h:outputLink>
</f:facet>
</rich:popupPanel>
As you see I have a command button that should call generateMissionFeasibility method in the bean.
The method will (among other things) add exception in the exceptions list.
I would like to check the list (if it's empty or not) to display the popup
The code above doesn't work because I think the popup is rendered before the end of the method in the bean, and the list is empty at the beginning.
One way to make popup panel be shown once rendered is to change
rendered="#{not empty missionHandler.exceptions}"
to
show="#{not empty missionHandler.exceptions}"
The code doesn't work because the first time the view is about to be rendered, missionHandler.exceptions will be empty, which means popupPanel never makes it to the browser. Subsequent requests to reRender popupPanel will fail as the component is nowhere to be found in the DOM.
For a component to be ajax-updated, it must already be in the DOM in the browser, this is the way ajax works. So the solution is to wrap the content of the popup panel in a component that will always be rendered.
That aside, even if you got the rendering correct, your popup will only be placed in the DOM. You actually need to call show() on the popup to get it to showup
To achieve what you want however, a better alternative will be to
Conditionally display the popup using javascript. If the condition is met, the show() function is called for the popup. Otherwise, an empty, do-nothing javascript function will be called.
<a4j:commandButton value="Compute Mission" action="#missionHandler.generateMissionFeasability}"
oncomplete="#{not empty missionHandler.exceptions ? #{rich:component('popupPanel')}.show()" : doNothing()}" render="popupPanel">
</a4j:commandButton>
For the doNothing js:
<script> function doNothing(){} <script/>
Take the rendering condition out of the modal panel
EDIT: Additionally, the show attribute on the popup component can be based on the same EL condition as the oncomplete attribute