OK, I'm guessing that this might be a bug but I'm not totally sure. Can anyone see what I'm doing wrong?
Here's the situation. I have a composite component that seems to work perfectly when it's alone on the page. The problem comes when the component is nested inside of a ui:repeat. Here are the two places I am calling the component (just for a test):
<q:case aCase="#{userSummaryBackingBean.userCases.get(0)}">
<f:setPropertyActionListener for="clickEvent" target="#{userSummaryBackingBean.value}" value="single"/>
<f:ajax execute="#this" render="#this :westPaneForm"/>
</q:case>
<ui:repeat value="#{userSummaryBackingBean.userCases}" var="aCase">
<li>
<q:case aCase="#{aCase}">
<f:setPropertyActionListener for="clickEvent" target="#{userSummaryBackingBean.value}" value="repeat"/>
<f:ajax execute="#this" render="#this :westPaneForm"/>
</q:case>
</li>
</ui:repeat>
and the component is defined as follows:
<cc:interface>
<cc:attribute name="aCase" type="com.autonomy.calltrack.data.dto.Case"/>
<cc:actionSource name="clickEvent" targets="caseCommandLink"/>
<cc:attribute name="action" targets="caseCommandLink" />
<cc:attribute name="actionSource" targets="caseCommandLink" />
<cc:clientBehavior name="click" event="action" targets="caseCommandLink" default="true"/>
</cc:interface>
<cc:implementation>
<h:commandLink id="caseCommandLink" styleClass="case ui-state-default" title="#{cc.clientId}">
--- more code ---
</h:commandLink>
</cc:implementation>
As you can see, the calls are exactly the same but the single item works and the items in the ui:repeat do not. Now, it makes sense to me that things will be problematic when the component itself has a ui:repeat. I mean, how would you retarget your actionSource, etc without knowing the ID of the items you need (which, inside of the repeat, is basically impossible).
HOWEVER, when I put the ui:repeat outside of the component I can't wrap my head around why things wouldn't work. The REALLY odd thing is that the f:ajax seems to work totally fine. VERY odd.
I've tried prefixing the targets attributes with :#{cc.clientId} and that doesn't help either (even though the "path" to the components is correct). Am I doing something wrong? Does anyone have a solution?
Alright, something must be wrong because even this doesn't work:
<ui:repeat value="#{userSummaryBackingBean.userCases}" var="aCase">
<h:commandLink id="caseCommandLink" value="test" styleClass="case ui-state-default">
<f:setPropertyActionListener target="#{userSummaryBackingBean.value}" value="REPEAT"/>
<f:ajax execute="#this" render="#this :westPaneForm"/>
</h:commandLink>
</ui:repeat>
What the heck could I be missing?
My page was using view params but they weren't a child of f:view so they were causing problems.
When I moved them everything started to work normally. I'm not sure why but it seems that things break when you have something like the following outside of an f:view:
<f:metadata>
<f:viewParam name="caseId" value="#{caseBackingBean.viewingCaseNumber}" />
</f:metadata>
<f:event type="preRenderView" listener="#{caseBackingBean.loadCase}" />
Thanks for the help BalusC.
Related
I want to have a composite that composes
<h:form id="f_imgA" >
<h:graphicImage id="imgA"
onclick="document.getElementById('#{k_imgA.clientId}').value=mods(event)"
value="images/img?r=#{Math.random()}">
<f:ajax event="click" listener="#{mBean.handleEvent}"
execute="#this k_imgA" render="#this"></f:ajax>
</h:graphicImage>
<h:inputHidden id="k_imgA" binding="#{k_imgA}" value="#{mBean.keyX}" />
</h:form>
when I write
<comps:cimg imgId="imgA" />
The original purpose of this code is to send the modifier-states (Ctrl, Shift, Alt) to the server.
I have
<composite:interface>
<composite:attribute name="imgId" />
</composite:interface>
<composite:implementation>
<h:form id="f_#{cc.attrs.imgId}">
<h:graphicImage id="#{cc.attrs.imgId}"
onclick="document.getElementById('#{k_${cc.attrs.imgId}.clientId}').value=mods(event)"
value="images/img?r=#{Math.random()}">
<f:ajax event="click" execute="#this k_#{cc.attrs.imgId}"
listener="#{mBean.handleEvent}" render="#this">
</f:ajax>
</h:graphicImage>
<h:inputHidden id="k_#{cc.attrs.imgId}"
binding="k_#{cc.attrs.imgId}" value="#{mBean.keyX}" />
</h:form>
</composite:implementation>
which, quite expected, does not work. The offending expression is
#{k_${cc.attrs.imgId}.clientId}
which is intended to return the clientId of the hiddenInput with id k_imgA . As far as I know, EL cannot handle nested expressions like the one above, but it was worth a try. So is there a simple, straightforward way to get the clientId of k_imgA? I don't want to use more javascript, if this can be avoided.
Edit:
don't get confused about #{Math.random()}, it works just because I have a bean called "Math".
The javascript function mods is given by
<h:outputScript target="body">function mods(event) {return ((event.ctrlKey)?1:0)+((event.shiftKey)?2:0)+((event.altKey)?4:0)} </h:outputScript>
You don't need to fiddle with all those _#{cc.attrs.imgId}. Just give the composite a fixed id. They are already naming containers themselves. JSF will then worry about the rest.
<composite:implementation>
<h:form id="f">
<h:graphicImage id="i" ... />
<h:inputHidden id="k" ... />
</h:form>
</composite:implementation>
Usage:
<comps:cimg id="imgA" />
Generated HTML:
<form id="imgA:f" ...>
<img id="imgA:f:i" ... />
<input id="imgA:f:k" ... />
</form>
As to the JS attempt, you'd best use element's own ID as base:
<h:graphicImage onclick="document.getElementById(id.substring(0,id.lastIndexOf(':')+1)+'k').value='...'" />
Or, easier, if the hidden element is guaranteed to be the direct sibling of the image element in the generated HTML DOM tree, then just grab it by Node#nextSibling:
<h:graphicImage onclick="nextSibling.value='...'" />
<h:inputHidden ... />
The binding will never work as in your attempted construct, and even then you'd best do it via a Map in request scope or a so-called backing component.
See also:
Accessing JSF nested composite component elements in JavaScript
Integrate JavaScript in JSF composite component, the clean way
Rerendering composite component by ajax
I am trying to toggle between two different command buttons depending on whether a list contains the given item ID:
<c:if test="#{roomServiceManagerBean.holdinghotelvilla.contains(hotel.hotelvillaId)}">
<p:commandButton ajax="true" id="commanddeactivate" update=":roomserviceForm:hoteltable,:roomserviceForm:msgs" actionListener="#{roomServiceManagerBean.deactivateServiceForHotel(hotel.hotelvillaId)}" icon="ui-icon-radio-off" type="submit" value="Remove Service">
<f:param name="roomserviceid" value="#{roomServiceManagerBean.roomServiceId}" />
</p:commandButton>
</c:if>
<c:otherwise>
<p:commandButton id="commandactivate" update=":roomserviceForm:hoteltable,:roomserviceForm:msgs" actionListener="#{roomServiceManagerBean.activateServiceForHotel(hotel.hotelvillaId)}" icon="ui-icon-radio-on" type="submit" value="Provide Service">
<f:param name="roomserviceid" value="#{roomServiceManagerBean.roomServiceId}" />
</p:commandButton>
</c:otherwise>
However, it fails and the both buttons appear. How is this caused and how can I solve it?
The <c:if> will in this construct fail if #{hotel} is not available during view build time but only during view render time (e.g. because it's definied as <p:dataTable var>). The <c:otherwise> is completely displaced here. It belongs to a <c:choose><c:when>. Technically, you should be using <c:if> instead with a negation in the test. Or, you should be replacing the first <c:if> by a <c:when> and wrap the whole thing in <c:choose>. However that would still fail if #{hotel} is not available during view build time.
Just use JSF component's rendered attribute instead.
<p:commandButton ... rendered="#{roomServiceManagerBean.holdinghotelvilla.contains(hotel.hotelvillaId)}">
...
</p:commandButton>
<p:commandButton ... rendered="#{not roomServiceManagerBean.holdinghotelvilla.contains(hotel.hotelvillaId)}">
...
</p:commandButton>
See also:
EL expression in c:choose, can't get it working
JSTL in JSF2 Facelets... makes sense?
I've been struggling with this for two days with no success and I think it's already time to ask for your help. But first of all, this is what I'm using:
JSF 2 Mojara 2.1.1
Primefaces 3.4.2
Netbeans 7.1.1
Tomcat 7.0.37
And now, the problem: I have a main page which is composed by several other pages using several <ui:include .. /> tags, like this:
<ui:composition template="/resources/templates/template1.xhtml">
<ui:define name="appData">
<p:panelGrid columns="1" id="contenidoAplicacion" styleClass="noborder">
<h:form id="fNewPerson">
<p:panel header="New employee" style="min-height:40em">
<ui:include src="./forms/personal.xhtml" />
<p:accordionPanel styleClass="noborder" activeIndex="3">
<p:tab id="tabSomeData" title="Identidad profesional" >
<ui:include src="./forms/formSomeData.xhtml" />
</p:tab>
....
....
</ui:define>
</ui:composition>
The personal.xhtm file looks like this:
<p:panelGrid>
<p:row>
<p:column >
<h:outputLabel value="Field1"/>
<p:inputText label="Field1" id="field1" value="#{dataBacking.selectedPerson.field1}" tabindex="1"
required="true" size="10" >
<f:convertNumber for="field1" integerOnly="true" groupingUsed="false"/>
</p:inputText>
<p:inputText id="field2" value="#{dataBacking.selectedPerson.field2}" tabindex="2" required="true" size="1" maxlength="1" >
<p:ajax event="keyup" listener="#{dataBacking.check}"
process="field1 field2" partialSubmit="true"
update="field1 field2 photo"/>
</p:inputText>
</p:column>
<p:column rowspan="5" >
<p:graphicImage id="photo" value="#{dataBacking.selectedPerson.photo}" width="90" />
</p:column>
</p:row>
...
</p:panelGrid>
The check() method in the dataBacking class is irrelevant because it only checks if the field1 and the field2 meet some rules and it works properly. The problem comes when the main page is loaded for the first time. In that case, the <p:ajax /> component in personal.xhtml doesn't work. I have to reload the page (simply by pressing the F5 key) and this time it works as it would be expected.
I've been changing some attributes of the component, but nothing seems to work. I really don't know what else to do. Any kind of help will be apreciated.
EDITED. After one more day, I think the problem has nothing to do with Primefaces ajax component, as the title of the question suggested. I've come to this conclusion through these two facts:
The behaviour with the <f:ajax .../> component remains the same.
I've figured out that the view relative to the first time I load the page is not persisted. I'll try to explain myself.
The DataBacking class has defined its scope as view so that the page can "see" all the attributes and methods during the time it's been shown to the user. However, I've noticed that the constructor is called twice: the first time the page is loaded (and then, none of the methods of the class are successfully invoked) and when I refresh the page. In this last case, the behaviour of both the page and the class is the expected one.
I have the following code, Using jsf2.2, primefaces 3.2.
My requirement is to update the Project depending on the updateFlag.
when i use c:if (xmlns:c="http://java.sun.com/jsp/jstl/core") like the following code the action Listener for the Update commandButton is not called. but if i use < p:panel rendered="#{projectBean.updateFlag}" > instead of < c:if > it works. Please help i dint get it, i think i should use c:if but its not working.
<p:dialog widgetVar="projectUpdate" id="projectUpdatePanel" modal="false" >
<p:panel>
<c:if test="#{projectBean.updateFlag == false}">
<h:outputText value="Project Title" />
<p:inputText disabled="true" value="#{projectBean.selectedProjectDo.projectTitle}" />
<p:commandButton value="Update" disabled="true" />
<p:commandButton value="Cancel" actionListener="#{projectBean.cancelUpdate}" />
</c:if>
<c:if test="#{projectBean.updateFlag == true}">
<h:outputText value="Project Title"/>
<p:inputText value="#{projectBean.selectedProjectDo.projectTitle}" />
<p:commandButton value="Update" actionListener="#{projectBean.updateProject}" />
<p:commandButton value="Cancel" actionListener="#{projectBean.cancelUpdate}" />
</c:if>
</p:panel>
</p:dialog>
You better just use it the following way (put a condition on the disabled attribute)
<p:panel>
<h:outputText value="Project Title"/>
<p:inputText disabled="#{not projectBean.updateFlag}"
value="#{projectBean.selectedProjectDo.projectTitle}" />
<p:commandButton disabled="#{not projectBean.updateFlag}" value="Update"
actionListener="#{projectBean.updateProject}" />
<p:commandButton value="Cancel" actionListener="#{projectBean.cancelUpdate}" />
</p:panel>
In general : don't use JSTL tags unless you really need them...
This is a classic example of non-DRY code, which is bad. Daniel shows perfectly how to make it DRY, however he didn't explain the cause of your problem.
Based on the problem symptoms, this will happen when #{projectBean} is a view scoped bean. View scoped beans are stored in the JSF view state. So, view scoped beans are only available after restore view phase. However, JSTL tags runs during restore view phase, while the view scoped beans are not available yet. This causes creation of a brand new view scoped bean instance, which is then later replaced by the real view scoped bean which was stored in the restored JSF view state. The brand new and separate view scoped bean which is used by JSTL will have all its properties set to default and thus the block which has updateFlag=false will always be invoked.
See also:
JSTL in JSF2 Facelets... makes sense?
I am in a little bit of trouble with my preRenderView-Event. My page also uses a commandbutton to submit data but unfortunately the preRenderView-Event is always called before the buttons action is invoked.
The preRenderView-Event is responsible for loading data from a service. Since the page is simple and doesnt have to store any data I dont need any Session or ViewScoped-Beans.
As far as I understood the event is called in the Render-Response-Phase and the action in the button should happen somewhat earlier.
<h:body>
<f:metadata>
<f:viewParam name="id" value="#{bean.id}" converter="converter.SetOfLongConverter"/>
<f:event type="preRenderView" listener="#{bean.initializeData}" />
</f:metadata>
<ui:composition template="/META-INF/templates/myTemplate.xhtml">
<ui:param name="title" value="#{bean.title}"/>
<ui:define name="content">
<h:outputText value="#{bean.description}" />
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="Model" for="model" />
<h:inputText id="model" value="#{bean.model}" />
<h:outputLabel value="Manufacturer" for="manufacturer" />
<h:inputText id="manufacturer"
value="#{bean.manufacturer}" />
<h:outputLabel value="Year" for="year" />
<h:inputText id="year" value="#{bean.year}" />
</h:panelGrid>
<h:commandButton value="Create" type="submit" action="#{bean.create}" rendered="#{bean.createMode}"/>
<h:commandButton value="Save" type="submit" action="#{bean.save}" rendered="#{!bean.createMode}" />
</h:form>
</ui:define>
</ui:composition>
</h:body>
I added some Console-Messages to verify when the method in the bean is called and when I have the preRenderView-event it never happens.
Any advice what I am doing wrong here?
The <f:metadata> has to go inside <ui:define> of an <ui:composition>.
See also <f:metadata> tag documentation (emphasis mine):
Declare the metadata facet for this view. This must be a child of the <f:view>. This tag must reside within the top level XHTML file for the given viewId, or in a template client, but not in a template. The implementation must insure that the direct child of the facet is a UIPanel, even if there is only one child of the facet. The implementation must set the id of the UIPanel to be the value of the UIViewRoot.METADATA_FACET_NAME symbolic constant.
The simple reason is because the metadata is supposed to be view-specific, not template-specific.
Update: it turns out that the action method is not invoked at all. You've there a rendered attribute on the command button which seems according the symptoms to be dependent on a request based variable instead of a view based variable. Putting the managed bean in the view scope should fix this problem. See also commandButton/commandLink/ajax action/listener method not invoked or input value not updated