Develop Reference

PrimeFaces update gallery when SelectOneMenu changes

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.

how to change css of the image link when clicked?

i have a commandLink that has a graphicImage inside and i want to change some property
of the link to show that it is clicked.I could find no built-in property for that purpose.
Maybe some javascript or css code is required.Since i am not so good at those,i'd be glad if someone could guide me a way.Thanks
Here is the code of the link.
<p:commandLink title="Forward" update="growl"
actionListener="#{roombaBean.forward}">
<p:graphicImage value="images/but_forward.png" />
</p:commandLink>

Use onclick event of the commandLink to execute javascript.
Something like
<p:commandLink onclick="changeCSSInJavascript()" ...>
....
</p:commandLink>

You could add a style attribute to primefaces graphicImage and give it a string value from a bean. After the link it's clicked you could update that string value with: opacity:0.4:
<p:commandLink title="Forward" update="growl"
actionListener="#{roombaBean.forward}">
<p:graphicImage value="images/but_forward.png" style="#{myBean.myStringStyleValue}" />
</p:commandLink>
For IE8 and earlier use filter:alpha(opacity=40);
Anyway I don't really understand why do you want something like this? Don't you navigate away from the page? Why is it really matter that the image was clicked? Please, if you could give some more info, we could see if there is a better solution...

I need a button that performs an action but doesn't trigger validation or refreshes the page(JSF 2.0)

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.

How to use RichFaces a4j:commandButton not using submit

I have an a4j:commandButton which looks like this
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp"
action="#{MyBacking.stop}" value="Stop" />
</a4j:commandButton>
When the app is deployed, and the button clicked, the stop() method is not being called. All the a4j:commandButton examples refer to forms, but this button is not in a form - it's a button the user is going to use to cause the server to run some back-end logic. At the moment, the method is
public void stopNode() {
logger.info("STOPPING");
setLastOp("Stopped.");
}
Other methods which don't use this type of button are updating the lastOp field, but I'm not seeing anything on the console with this one. Am I right to cast this as a button? Should I put this in a h:form tag?
The firebug console says:
this._form is null
which I don't understand.
Any help well appreciated.

UICommand components ought to be placed inside an UIForm component. So, your guess
Should I put this in a h:form tag?
is entirely correct :) This because they fire a POST request and the only (normal) way for that is using a HTML <form> element whose method attribute is set to "post". Firebug also says that a parent form element is been expected, but it resolved to null and thus no actions can be taken place.
Only "plain vanilla" links like h:outputLink and consorts doesn't need a form, because they just fires a GET request.

Yes, wrap it in a form. I'm sure BalusC will post a detailed explanation while I'm typing my answer. (yup, there it is)
I have to ask why you didn't just try a form first, before posting here.

Look at your code:
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp" action="#{MyBacking.stop}" value="Stop" />
You finished <a4j:commandButton with />, why need that orphan </a4j:commandButton> ?

If for some reason you don't want to place the button inside a form, you can do something like this:
<a4j:commandButton onclick="fireAjax()"/>
<h:form>
<a4j:jsFunction name="fireAjax" action=".."/>
</h:form>

Show/Hide RichFaces component onclick client-side? (without AJAX)

I'm looking for a way to show/hide an arbitrary RichFaces component. In this case, I have a <rich:dataTable> that contains several rows. Each row needs to have it's own, independent Show/Hide link, such that when you click "Show details", two things happen:
The "Show details" link is re-rendered as "Hide details"
The associated detailsColumns should become visible (starting from a state of rendered="true" but style="display: none;").
I don't want to write my own JavaScript functions if it's not absolutely necessary. I also don't want to have a server-side bean keep track of which detailColumns are being displayed, and subsequently re-render everything over AJAX: this should be purely client-side behavior. I'm not sure how to accomplish that.
The following pseudo-code (hopefully) illustrates my goal:
<rich:column>
Show details
Hide details
</rich:column>
<rich:column>
<h:outputText value="#{thisRow.someData}" />
</rich:column>
<rich:column id="detailsColumn" colspan="2" breakBefore="true">
<h:outputText value="#{thisRow.someMoreData}" />
</rich:column>

To the point, you need to grab the generated HTML element from the DOM in JavaScript and then toggle its CSS display property between block and none. As far as I know, RichFaces doesn't provide out-of-the-box scripts/facilities for this, but it is basically not that hard:
function toggleDetails(link, show) {
var elementId = determineItSomehowBasedOnGenerated(link.id);
document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}
with
<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>