I have come across some small but annoying problem when developing an application using JSF 2.2.
On my .xhtml page I have h:dataTable and one of it's columns consists of h:selectBooleanChecbox objects. It doesn't really matter what this checkbox do, but my problem is that when I check one or more checkboxes and then reload the page in the browser, the checkboxes I've previosly ticked stays checked, what is of course not what I expect to happen.
My h:selectBooleanCheckbox is like following:
<h:selectBooleanCheckbox disabled="${firstLaunchBackingBean.disableFirstPhaseForm}" onselect="#{firstLaunchBackingBean.addSelectedEmail(item)}">
<f:ajax render="#this" execute="#this"/>
</h:selectBooleanCheckbox>
I also have to mention that my backing bean is conversation scoped, but I don't know if it has anything to do with my problem.
Related
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.
<h:form>
<h:selectOneMenu value="#{productBean.productName}">
<f:selectItem itemValue="" itemLabel="..." />
<f:selectItems value="#{productBean.pizza}" var="pizza" itemValue="#{pizza.name}" itemLabel="#{pizza.name}" />
<f:ajax listener="#{productBean.valueChanged(productBean.productName)}" render="pizzaResult pizzaButton" />
</h:selectOneMenu>
<h:commandButton value ="Dodaj do zamówienia" disabled="#{productBean.isDisabled}" id="pizzaButton" onclick="#{productBean.order}"/>
<h:outputText id="pizzaResult" value="#{productBean.message}" />
</h:form>
This is my JSF form. I used valueChanged listener to make button diabled in ome cases and it works good. But I don't get why it triggers also the buttons onclick. How to do something which enable me to use button ONLY after clicking it?
I noticed that when I delete the disabled option it works good:/ But why I cannot trigger the action when button is enabled in the moment?
onclick is a client side attribute so you shouldn't try to bind it to managed bean method calls and it looks as though you did onclick=#{productBean.order} (apart from the missing quotes). This may be the cause of your problems.
OK i did that. The problem is that the button may appear as enabled (disabled="false") but its client side change and server don't know about it and application thinks that the button is still disabled. Even it looks like enabled button it won't work with action="#{something}".
You have to let server know about the change. THe only thing i did is adding the #ViewScoped to the managed bean. Now the action of disabling and enabling the button is also being seen by the server and works perfectly.
However i have a question. Client side verifaction is a bad idea. Disabled button is the only thing which prevent user from sending empty itemValue or product(in my case) which is unavailable (is_available = 0 in DB). The question is: Is it enough to ensure that it will be safe?
edit: Unfortunately after clicking the button the buttons appear enabled even though the oneSelectMenu is turned to the first, empty value. After changing the list it works again as previously, and after clicking again the situation takes time again.
I have a JSF/PrimeFaces form page set up to edit some configuration details. At the bottom are Submit and Cancel buttons implemented as CommandButton. The Cancel button looks like this:
<p:commandButton
action="priorPage.xhtml?faces-redirect=true"
value="Cancel" />
The problem is that the view bean still winds up doing more processing on the data that's been entered into the form than I'd like. It isn't updating anything in the database, but if (say) I enter a string into a field that's looking for a numeric in the bean, it still produces errors.
Part of my solution is, of course, to get the bean to gracefully handle that sort of bad data, and I'm working on it. But I'd also like to tweak that button so that it just takes the user to the prior page. Is there some attribute I can set that will prevent the form from being processed at all?
The <p:commandButton> submits the form. You don't want to submit the form. You should then not use the <p:commandButton>, but just <p:button>.
<p:button value="Cancel" outcome="priorPage.xhtml" />
See also:
Difference between h:button and h:commandButton
I have a composite component, which represents an item that will be stored in a list. I would like to display these items using <ui:repeat>, but I have problems making ajax calls. The thing is that for <f:ajax> render attribute, I want to give the id of my component through
#{cc.clientId}
However this raises error when I use it with <ui:repeat>, because of the reasons that are explained in this document https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat.
<cc:implementation>
<div id="#{cc.clientId}">
<h:form>
<h:commandLink styleClass="btn btn-info" value="Click me">
<f:ajax execute="#form"
render=":#{cc.clientId}"/>
</h:commandLink>
</h:form>
</div>
</cc:implementation>
Is there a way to make the above component work using <ui:repeat> (for example is there a component which can replace the <f:ajax> tag handler, or are we stuck to <c:forEach> construct)?
<ui:repeat id="myComponent" value="#{backingBean.myComponentItem}" var="item" varStatus="itemIndex">
<components:exampleComponent id="myComponent"/>
</ui:repeat>
So I start using <c:forEach> instead of <ui:repeat>, and I was able to use the id of my component in the render attribute of <f:ajax>. But this time when I make pagination, if the size of the list decreases I start having empty components in my page. For solving this I started doing pagination through ajax calls and this solved the empty component problem.
Just I thought everything was solved I encountered another problem: lets say I have a page listing 10 components, and I went to another page, and from that page I came to the component displaying page again, but for some reason lets say this time I retrieved only 3 items from database, and I just want to display these 3 items through my components but nothing else.. Unfortunately in this scenario, 3 items are displayed correctly, but the page also contains 7 empty components too. For overcoming this I need to redirect to this page one-more time. So I just gave up at this point. Apart from this I also eventually get the exception below, when the number of the components on the page changes.
java.lang.ClassCastException: [Ljava.lang.Object; cannot be cast to com.sun.faces.application.view.StateHolderSaver
I tried using the suggestion explained in the post Jsf Error : java.lang.ClassCastException, but it didn't work for me, I started getting another error which is similar to above exception.
<context-param>
<param-name>javax.faces.FULL_STATE_SAVING_VIEW_IDS</param-name>
<param-value>/pagename.xhtml</param-value>
</context-param>
So after these long explanations I would just like to learn what is the best approach for creating composite components which are ajax-enabled, who are fully responsible of their own-states and independent of other components, and that can be displayed in the page more than once and the number of components may vary during the page life-cycle (through pagination, navigation etc).
So far the best solution I came up with is, to check number of components in the page and when that number changes through an ajax call or because of a navigation from another page, redirect to the destination page one more time, this refreshes the empty components in the page without creating much disturbance to users. If you come up with any better solution please let us know.
Hopefully the title isn't too cryptic ...
The problem we have is that we generate a bunch of input controls (h:inputOneMenu, h:inputText etc) from some Java List.
Works fine EXCEPT the requirement is that these inputs validate on the fly. Again not so hard except that as there controls were generated in a loop the only possible reRender action is basically the entire form or an a4j:outputPanel around each loop iteration which is basically the same thing.
Now the above two solutions technically work but they have the nasty side effect of reRendering all the page controls which makes the page feel really twitchy and clunky. We'd like to stop this from happening so ideally the only control that gets reRendered is the control that send the ajax update/validation.
Basically this is our page code:
<ui:repeat value="#{seam-outjected-list}" var="item">
<a4j:outputPanel selfRendered="true">
<h:inputText value=#{item.value}>
<a4j:support event="onblur" ajaxSingle="true" />
</h:inputText>
</a4j:outputPanel>
</ui:repeat>
I've left out a bit of stuff that just renders different controls depending on the item.
As you can see we're currently using the a4j:outputPanel solution so every time any loop generated control is updated all the controls are reRendered.
Thanks in advance if anyone has any thoughts.
My first thought is that you should try replacing your <ui:repeat> with an <a4j:repeat> and take advantage of the ajaxKeys attribute to only reRender certain rows.
From the Richfaces Docs:
The main difference of this component
from iterative components of other
libraries is a special "ajaxKeys"
attribute. This attribute defines row
keys that are updated after an Ajax
request. As a result it becomes easier
to update several child components
separately without updating the whole
page.