I need some help in the below code
<h:commandButton id="WhatifButtonID" value="#{demandBean.dmdReviewScreenLabelVO.whatIf}" style="width:60px; height:22px;" actionListener="#{demandBean.whatif}" onclick="window.open('DemandTargetList.xhtml','whatif','width=460,height=280,top=150,left=350,resizable=no,scrollbars=no')" >
<f:ajax execute="#this" ></f:ajax>
</h:commandButton>
In the above case, the onclick attribute gets executed first followed by the actionlistener attribute. I wanted the actionListener attribute to get executed first followed by the onclick function, since the page that loads onclick needs to get certain values from the actionListener. Please let me know how to acheive the same. Thanks in Advance.
Just let <f:ajax> render a script on complete.
<h:commandButton value="#{demandBean.dmdReviewScreenLabelVO.whatIf}" actionListener="#{demandBean.whatif}">
<f:ajax execute="#this" render="popupScript" />
</h:commandButton>
<h:panelGroup id="popupScript">
<h:outputScript rendered="#{demandBean.whatifPressed}">
window.open('DemandTargetList.xhtml','whatif','width=460,height=280,top=150,left=350,resizable=no,scrollbars=no');
</h:outputScript>
</h:panelGroup>
wherein you set whatifPressed to true in the whatif() method.
PrimeFaces may help with this with the use of the <p:remoteCommand/> tag. You can then just use a plain old button to call the remoteCommand, then simply execute the window.open().
<p:remoteCommand name="viewSomething" actionListener="#{someActionIWantToExecuteBeforeOpeningWindow}" update="#this" process="#this"/>
<button onclick="viewSomething(); window.open('http://somewhere.com', 'windowName', 'height=924,width=723');">Click me!</button>
You can use it over lists of items if you call the javascript function it creates something unique.
Related
I have next a4j:jsFunction
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true"
render="securityForm">
</a4j:jsFunction>
and JSF form with some dialog inside
<h:form id="securityForm">
<h:panelGroup rendered="#{someCondition}">
......
</h:panelGroup>
</h:form>
In my business logic it has to be executed twice consequently. In the first time all is fine. Rendered method is invoked and the expected dialog is present on the page. In the second time rendered method is not invoked, but model has been changed and I expect that dialog will not be present on the page. I supposed that it's some richfaces issue and I tried to use f:ajax
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true">
<f:ajax event="begin" render=":securityForm"/>
</a4j:jsFunction>
but unsuccessfully. Rendered method still not invoked in the second time. What is it? Some JSF optimization or bug? What's the workaround?
JSF version 2.1.19
The problem was in <h:panelGroup rendered="#{someOtherCondition}">
over h:form which equals false after the first rendering (ON THE SERVER SIDE).
However, this panelGroup is not part of rendering. So, my code:
<h:panelGroup rendered="#{someOtherCondition}">
<h:form id="securityForm">
<h:panelGroup rendered="#{someCondition}">
......
</h:panelGroup>
</h:form>
</h:panelGroup>
<h:form>
<a4j:jsFunction name="renderOnBusinessErrorEvent" execute="#none" bypassUpdates="true" immediate="true"
render="securityForm">
</a4j:jsFunction>
</h:form>
Before calling renderOnBusinessErrorEvent() I'm changing the value of someOtherCondition from true to false, but I don't rerender this element. Actually, on the server side this element is already missing. Looks like it's JSF feature, but is it specificated somewhere?
Is it possible to reset the value of an inputText after clicking on the commandButton in JSF? The inputText UIElement provides the method ResetValue so I tried something like this:
<h:inputText id="measurementadd" binding="#{inputTextMeasurement}">
<f:validateRegex pattern="[a-zA-Z ]*"/>
<f:ajax event="keyup" render="measurementaddmessage submit" execute="#this"/>
<h:inputText>
<p:commandButton id="submit" action="#{Bean.addMeasurement(inputTextMeasurement.value)}"
value="submit" update="dataTable measurementadd measurementaddmessage"
disabled="#{empty inputTextMeasurement.value or facesContext.validationFailed }" >
<f:ajax event="mouseup" execute="#{inputTextMeasurement.resetValue()}" />
</p:commandButton>
<h:messages for="measurementadd" id="measurementaddmessage"/>
But after clicking the Button the inputTextMeasurement doesn't reset it's value.
Does someone know a good workaround for this?
I'm searching for a solution without JS and JAVA, so a realization in JSF would be very cool.
Your mistake is here in the execute attribute:
<f:ajax event="mouseup" execute="#{inputTextMeasurement.resetValue()}" />
The execute attribute should represent a space separated collection of client IDs to include in the process/decode of the ajax request. However, you specified a listener method there.
You need the listener attribute instead:
<f:ajax listener="#{inputTextMeasurement.resetValue()}" />
(and I omitted event as it defaults here to click which is already the right one)
Interesting detail is that the other <f:ajax> in the same piece of code used the exeucte attribute the right way.
Unrelated to the concrete problem, have you looked at <p:resetInput>? This saves an ajax listener method in the bean. Replace the whole <f:ajax> with
<p:resetInput target="measurementadd" />
Why dont we just use
<input type="Reset"/>
This one is works fine for me! ???
I have solved my problem as below
<p:commandButton id="submit" action="#{Bean.addMeasurement(inputTextMeasurement)}">
Sending back bean UIInput component. Get and Reset value in back bean.
public void addMeasurement(UIInput
String msr = (String) inputTextMeasurement.getValue()
inputTextMeasurement.resetValue();
}
I am trying to pass a parameter to an ajax event, this is an example of what I mean:
<h:panelGrid id="pictures" columns="3">
<c:forEach items="#{createProduct.pictures}" var="picture">
<h:graphicImage value="#{picture.source}" />
<h:inputText value="#{picture.alt}" />
<p:commandButton value="Remove">
<f:ajax execute="#form"
listener="#{createProduct.removePicture(picture)}"
render="#form" />
</p:commandButton>
</c:forEach>
</h:panelGrid>
I know this code won't work because you cannot pass a parameter through the ajax listener. Though this is merely an example of what I am trying to accomplish. I have tried using <f:param id="picture" value="#{picture}" /> allong with the ajax tag, though this results in a duplicate component ID form:picture since it is in a loop.
I need this parameter inside the method in order to determine which picture to remove.
How can I solve this with ajax?
I am using a #ViewScoped CDI-bean.
First, I suggest replacing c:forEach with ui:repeat tag. Second, as you are using Primefaces, you should use all its strength. So, commandButton can be more easily written:
<p:commandButton value="Remove" process="#form" update="#form" action="#{createProduct.removePicture(picture)}"/>
and that's it. Don't complicate.
By the way, primefaces commandButton is sends AJAX request by default, you don't need (and you must not use) f:ajax tag.
I have a <p:dialog> which contains a <h:selectOneMenu> with a valueChangeListener. Here's the relevant code:
<p:dialog>
<h:form>
<div>
<h:selectOneMenu value="#{itemController.itemId}" valueChangeListener="#{itemController.chkItemType}" onchange="submit()">
<f:selectItems value="#{itemController.itemsList}" />
</h:selectOneMenu>
</div>
</h:form>
</p:dialog>
When it is called, the dialog get closed. I would like to keep it open and only close it on cancel button. How can I achieve this?
That's expected behaviour. The onchange="submit()" which you've there submits the entire form synchronously, causing a complete page reload.
You should be using ajax instead to perform the submit. Replace the onchange attribute by just this tag
<f:ajax />
inside the <h:selectOneMenu>. This way the form will be submitted asynchronously, with by default no page reload at all.
Depending on the concrete functional requirement, which you didn't tell anything about, you do probably also not need a valueChangeListener at all, but rather a <f:ajax listener>.
<f:ajax listener="#{itemController.chkItemType}" />
If you'd like to update some parts of the page on successful execution of the ajax request, use its render attribute.
See also:
When to use valueChangeListener or f:ajax listener?
I would like to know how could I retrieve my jsf component value, when an event is executed. For example consider this component:
<rich:select id="selectEmpresa"
value="#{macroprocesoController.empresaSeleccionada}"
converter="genericConverter" enableManualInput="true" onchange="if(!#{rich:component('selectEmpresa')}.getValue()) return false;">
<f:selectItems value="#{selectItemsController.empresaItems}" />
<a4j:ajax execute="#this" render="macroProcesosTable" event="selectitem" listener="#{macroprocesoController.empresaSelectedListener}"></a4j:ajax>
<a4j:ajax execute="#this" render="macroProcesosTable" event="change" listener="#{macroprocesoController.empresaSelectedListener}"></a4j:ajax>
</rich:select>
What I want is to conditionally execute the a4j:ajax for the change event, so that when the component executes the selectitem event, and thus setting a value, the change event will be bypassed. However this is not working, any suggestions or a way to do what I need?
onchange="if(!#{rich:component('selectEmpresa')}.getValue()) return false;"
This expression is evaluated when the view is rendered, not when the DOM event executes (check the generated HTML source to see it yourself). You'd need to use JavaScript instead to get the current value. The following should do:
onchange="if (!this.value) return false;"
or just
onchange="return !!value;"