Lets say we have button
<h:form>
<p:commandButton id="refreshButton" value="refresh all depending components"/>
</h:form>
Along the way I will add components that should be updated when the button is clicked. So using the update="text1,text2" will not suffice, as text3 might be added later on and shouldn't require changes to the refresh button.
<h:outputText id="text1" value="{bean.someValue1}></h:outputText>
<h:outputText id="text2" value="{bean.someValue2}></h:outputText>
... and later ...
<h:outputText id="text3" value="{bean.someValue3}></h:outputText>
What I want to do is to bind the components to the button, rather than the button having dependencies to the components
What you're asking is not possible. As least, not using the standard ways in the view.
But what is possible is to reference a common parent instead.
<p:commandButton ... update="texts" />
...
<h:panelGroup id="texts">
<h:outputText id="text1" ... />
<h:outputText id="text2" ... />
...
<h:outputText id="text3" ... />
</h:panelGroup>
Depending on the concrete functional requirement, which isn't clear from the question, there may be better solutions. But if it boils down to laziness and/or avoiding to "forget" to change the button, then I'm afraid that there's no magic fix.
I did a a temporary quickfix by using
<p:outputPanel autoUpdate="true">
<h:outputText id="text3" ... />
<p:outputPanel />
Guess it performance wise is not perfect, as it will be updated on all ajax events and not just the ones I'm interested in. But luckily this component is interested in all of them any ways, so it is not a problem atm.
Related
Forgive me I am not even sure my question is correctly stated. I am trying to unravel relationship between p:tab and h:panelGroup. I have very shallow understanding of JSF. I have following code.
<p:tabView id="view">
<p:tab id="A">
...
<p:ajax event="change" update="C,D" listener="#{bean.captureValue}"/>
</p:tab>
<p:tab id="B" titleStyleClass="x">
<h:panelGroup id="C">
<h:panelGroup rendered="#{bean.checkValue eq 'Yes'}"/>
<f:facet name="title"><table>...</table></f:facet>
<div>....</div>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="D">
<h:panelGroup rendered="#{bean.checkValue eq 'No'}"/>
<f:facet name="title"><table>.....</table></f:facet>
<div>....</div>
</h:panelGroup>
</h:panelGroup>
</p:tab>
</p:tabView>
So within component id="A", a user selects a value from drop down menu, bean captures it and dynamically show or hide component id="C" or "D" based on the value.
First time try, I didn't have any h:panelGroup tags. I used rendered attribute directly from p:tab component however I realized that unless I refresh the entire page, the bean.checkValue wouldn't know latest value captured. By reading many articles in this forum, I realized I have to wrap it with h:panelGroup which in turn worked by showing either h:panelGroup "C" or "D" based on the value selected from p:tab tag with id="A".
However the contents of f:facet tag is not visible anymore. It has html table tag which contains h:outputText with static value and p:graphicImage. I am not sure why and hope someone can solve this mystery.
Update:
Thanks to Arthur. I was able to fix the issue with his help. I paste here code that performs expected output.
<p:tabView id="view">
<p:tab id="A">
...
<p:ajax event="change" update="view" listener="#{bean.captureValue}"/>
</p:tab>
<p:tab id="B" titleStyleClass="x">
<f:facet name="title">
<ui:fragment rendered="#{bean.checkValue eq 'Yes'}"/>
<table>...</table>
</ui:fragment>
</f:facet>
<ui:fragment rendered="#{bean.checkValue eq 'Yes'}"/>
<div>...</div>
</ui:fragment>
<f:facet name="title">
<ui:fragment rendered="#{bean.checkValue eq 'No'}"/>
<table>...</table>
</ui:fragment>
</f:facet>
<ui:fragment rendered="#{bean.checkValue eq 'No'}"/>
<div>...</div>
</ui:fragment>
</p:tab>
</p:tabView>
Facets are representing a named section within a container component. Container for your facets are in both cases <h:panelGroup> and this component doesn't define any facet which you could use. As you don't provide in your sample code any name for the facet (which is mandatory) I only assume that maybe you would like to use a title facet for a tab, as <p:tab> component define facet named "title". Then it should look like
<p:tab id="B">
<f:facet name="title" >
<h:outputText value="Test1" rendered="#{bean.checkValue}"/>
<h:outputText value="Test2" rendered="#{!bean.checkValue}"/>
</f:facet>
</p:tab>
, so you implement rendering logic inside facet value (you decide which title would be displayed. This logic could be also moved to backing bean. Keep in mind that in primefaces sometimes components doesn't handle very well and you could try then use them as an attribute instead of facets as stands in this post
It is also possible that you misunderstand meaning of facets. The best way to explain them are the facets defined i component. Authors of this component wanted to provide for users possibility to define header and footer of datatable. Then you, as a jsf user can compose header for instance, from other different components. You could also check this post where facets are also explained.
One more thing to add is that using <h:panelGroup rendered="#{bean.checkValue}"/> for render logic is considred as bad pattern as it is going to produce a <span> element in your code. Instead you should use <ui:fragment rendered="#{bean.checkValue}"/> which is intended for rendering logic and it won't produce any additional html code
I am having an entity with many attributes which should be displayed in multiple tabs in a p:tabView. It might look like the following.
I have one h:form which surrounds the p:tabView. In the tabs I have a single p:message for every input element.
<p:column>
<p:outputLabel value="Name" for="name_input" />
</p:column>
<p:column>
<p:message for="name_input" display="icon" />
</p:column>
<p:column>
<p:inputText id="name_input" value="#{bean.person.name}">
<p:ajax /> <!-- put value into backingbean on tabchange -->
<f:validateRequired />
</p:inputText>
</p:column>
I have made the following observations.
1) Problem: validation is only executed in tabs which have been activated
If I switch to edit mode and the current tab has no validation errors and I do not change the tab, then my entity gets saved and validation error on other tabs are ignored.
If I switch to edit mode and navigate to a tab which has validation error and then navigate to the first tab with no validation error, then a vaidation error is displayed (but only from those tab, that I visited).
(I hope this is understandable, at least a little bit) It does not make a difference if I set dynamic=true/false and cache=false in the p:tabView.
2) Problem: no message icon on tab change
If I switch to edit mode and click on every tab so that every validation error are recognized (like in scenario b) I get a proper validation message (icon) and the p:inputText is displayed with a red border. So everything seems to be fine. But if I navigate to another tab with validation errors there is no message icon displayed, only the red border is around the particular p:inputText. As far as I would guess, the JSF lifecycle is executed on tab change but no validation takes place so for this lifecycle roundtrip everything is OK and the message icon disappears (on the other hand it is a mystery to me why the red border does not disappear...).
3) Problem: no visual hint in the tab
For the user experience I would very much like to have a visual hint (i. e. a red background on a tab-title) so that a user knows where the problems occur.
I have read Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad but neither the wizard (it is not a "wizardy" task it is just an edit of a big entity) nor the do-it-yourself-with-javascrip-and-css (main problem is the corporated identity I am using pretty often tabViews in other situations) is a good option for me.
Does anyone have a solution/hint for any of my problems?
I am using JSF 2.2, Primefaces 5.3.
OK, a colleague of mine came up with the answer.
First of all, my first two problems vanished into thin air. With the attributes dynamic="false" and cache="false" in the <p:tabView /> this works as desired (I do not know what I tested back then).
And the visual hint in the tab. There is a <f:facet name="title" /> which can be used to display the tab title and additional messages. The <p:message /> components are doubled, firstly inside the column at the input component and secondly in the title-facet. With a little CSS one can adjust the icons in the title at will.
<p:tabView dynamic="false" cache="false">
<f:facet name="title">
Address
<p:message for="name_input" display="icon" />
</f:facet>
...
<p:panelGrid>
<p:row>
<p:column>
<p:outputLabel value="Name" for="name_input" />
</p:column>
<p:column>
<p:message for="name_input" display="icon" />
</p:column>
<p:column>
<p:inputText id="name_input" value="#{bean.person.name}">
<p:ajax />
<f:validateRequired />
</p:inputText>
</p:column>
</p:row>
....
</p:panelGrid>
</p:tabView>
First off let me say I'm at most an intermediate JSF coder.
Now I have an odd problem with some primefaces buttons in my current project and it's really starting to get to me.
The environment is creating a football match.
I have 3 lists of players. The idea is that the user selects a player from the first list and then presses either the "Benched" button to add the player to the benched list or the "Starting" button to pick a player position and then add the player to the starting list.
(I would post a picture but I'm not allowed to :( )
Now my issue is that whenever I use the "Starting" button it renders the "Benched" button completely useless (I get no errors but the action method is not called). So I can add as many players to the bench to start with but as soon as i press the "Starting" button I can't bench more players. I can still use the "Starting" button though.
Here's my code:
<h:form id="matchForm">
<h:panelGroup id="updatePlayers">
<div class="myContainer">
<div class="myMatchBox">
<h:outputLabel value="Pick a player:" />
<p:selectOneListbox styleClass="heightClassPick myEditMatchPlayers myPickListOnEditMatches" filter="true" filterMatchMode="contains">
<f:selectItems value="#{manageMatchesBean.geteAllUsablePlayersOne()}" var="p" itemLabel="#{p.split('#')[0]} - #{p.split('#')[2]}" itemValue="#{p}"/>
<p:ajax event="valueChange" listener="#{manageMatchesBean.changeEPickedPlayerOne}" immediate="true"/>
</p:selectOneListbox>
<h:outputLabel style="display:block;" value="Add it to:" />
<p:commandButton styleClass="myMatchCommandButton" value="Starting" update="posdlg0table" oncomplete="PF('posdlg0').show();return false;"/>
<p:dialog header="Choose a position" widgetVar="posdlg0" modal="true" minHeight="40" resizable="false">
<h:dataTable id="posdlg0table" value="#{manageMatchesBean.getPickedPlayerPositionsOne()}" var="pos">
<h:column>
<p:commandButton value="#{pos.split('#')[0]}" update=":matchForm:updatePlayers" action="#{manageMatchesBean.eAddToStartingOne(pos.split('#')[1])}" process="#this" oncomplete="PF('posdlg0').hide();"/>
</h:column>
</h:dataTable>
</p:dialog>
<p:commandButton styleClass="myMatchCommandButton" value="Benched" update=":matchForm:updatePlayers" action="#{manageMatchesBean.eAddToBenchedOne()}" process="#this"/>
</div>
</div>
</h:panelGroup>
</h:form>
If I'm missing something or you want to see the java code let me know and I'll post it aswell.
I'm desperate!
Thanks in advance.
Alex
Apparently I solved it.. After several hours of trying to fix this I quit and wrote this question here and within 1 hour of writing it I found a tiny mistake in my java code. And yes apparently the method was called. Anyway. Now it works. Thanks.
Well, I want to fire AJAX from one component but for two destinations, let some code clear out what I mean with that :
<p:growl id="growl" showDetail="true" sticky="true" />
<p:inputText value="#{someBean.someProperty}" >
<f:ajax event="blur" render="growl" listener="#{someBean.someListenerMethod}"/>
<f:ajax event="blur" render="updatable" />
</p:inputText>
<h:outputText value="#{someBean.someProperty}" id="updatable" />
So once the blur event occures, the <h:outputText> and the <p:growl> will be "AJAXed" (in primefaces tongue : updated). I had this example in mind and anther one that replaces the second <f:ajax> with an update attribute in <p:inputText>, but neither done me good.
Hopefully, you're going to know better and aid me solving this out, thanks in advance.
You can add more than one item inside the render attribute :
<f:ajax event="blur" render="growl updatable" listener="#{someBean.someListenerMethod}"/>
I'm using jQuery's .load function to load one JSF page into another.
This works really well until the loaded JSF page uses some AJAX functionality. When this happens, the parent JSF page's AJAX stops working. In fact, after the two pages are combined whichever page has its AJAX called next is the one that continues to work. The other page stops working. If I use the parent page first, the child breaks. If I use the child first, the parent breaks.
Am I doing something wrong? I'm guessing JSF isn't designed for this sort of behaviour and that's fine but then how do I go about doing what I want?
Basically, we have a report page. When the user clicks the link to a report we would like the report to load dynamically into the existing page. That way, the user doesn't experience a page refresh. It's a pretty slick behaviour BUT obviously isn't ideal due to the pages breaking.
I suppose I could do this with a page that contains every report in an outputpanel and then determine which one is rendered based on a value in the backing bean but I can see lots of occasions where I'd like to be able to "inject" one page into another (for dynamic dialogs for instance) and it would suck to have to keep everything in one giant template.
Has anyone else come across this sort of problem? How did you solve it?
Do not use jQuery.load(). It does not take JSF view state into account at all, so all forms will fail to work. Rather make use of <f:ajax> and rendered attribute instead. Here's a basic example:
<h:form id="list">
<h:dataTable value="#{bean.reports}" var="report">
<h:column>#{report.name}</h:column>
<h:column>
<h:commandLink value="Edit" action="#{bean.edit(report)}">
<f:ajax render=":edit" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<h:form id="edit">
<h:panelGrid columns="3" rendered="#{not empty bean.report}">
<h:outputLabel for="name" value="Name" />
<h:inputText id="name" value="#{bean.report.name}" required="true" />
<h:message for="name" />
...
<h:panelGroup />
<h:commandButton value="save" action="#{bean.save}" />
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
You can if necessary split off the content into an <ui:include>.