We have an a4j:outputPanel that is ajaxRendered. Is there a way to call a javascript function each time it is (re)rendered? I know that we could put a call in every element that could possibly submit with oncomplete, but that really isn't practicably maintainable.
Details:
JSF 1.2
Richfaces 3.3
Example (oncomplete isn't actually available on the outputPanel tag):
<a4j:outputPanel ajaxRendered="true" oncomplete="myJSFunc()">
<h:outputText value="Test-aroo" />
</a4j:outputPanel>
<!-- other inputs, buttons and stuff -->
Update Might the jQuery library be able to help (it's built into RichFaces)? I'm looking at using .live() to maybe register with the oncomplete event. I'll keep experimenting and update with progress.
Update I didn't get a chance to implement the jQuery solution, but as my answer shows below myJSFunc() can just be put directly inside the rendered tags.
A solution is to put the javascript in a script tag inside the outputPanel:
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="Test-aroo" />
<script type="text/javascript">myJSFunc();</script>
</a4j:outputPanel>
You would need to call oncomplete on the component that fires the Ajax request. a4j:outputPanel doesn't have oncomplete attribute.
Related
Question: How can I prevent the execution of a while the website is rendering?
Thats where my Button sits:
<p:dialog widgetVar="newComment" height="200" width="500">
<h:form>
<h:panelGrid>
<h:outputText value="#{commentDialog.username}" />
<h:inputTextarea id="in_text" value="#{commentDialog.text}" />
<p:message for="in_text" />
</h:panelGrid>
<p:commandButton validateClient="true" value="Abschicken" ajax="true"
actionListener="#{popupRequestView.update}" action="PF('newComment').hide();update_popup();" />
</h:form>
</p:dialog>
The action attribute is intented to execute a backing bean action method on click, not to print some JavaScript code (which of course get executed immediately
You perhaps meant to use onclick or oncomplete instead. Like as in basic HTML, those on* attributes are intented to execute some JavaScript code during the specified HTML event ("click", "complete", etc).
oncomplete="PF('newComment').hide();update_popup();"
Another cause not visible in the information provided so far is that you forgot to register the p: XML namespace. Any <p:xxx> tags would then be printed as if it's plain text. Verify if a parent element somewhere in the markup has this:
xmlns:p="http://primefaces.org/ui"
Regardless, taking a JSF pause and learning some basic HTML/JavaScript wouldn't be a bad idea. After all, JSF is "just" a HTML/CSS/JS code generator.
you must use primefaces ajaxStatus to prevent click on button while rendering and execute ajax
ajaxStatus in primefaces showcase
I am looking for something like <rich:popupPanel> in RichFaces 4, but then for RichFaces 3. I haven't found anything like in documenation. There is only <rich:modalPanel> which doesn't suit my needs, because it has problems displaying my datamodel in table. The selection doesn't work, it always returns no rows selected. If I put my table component in <rich:panel> or <rich:togglePanel>, then it works fine.
Is there any popup window excluding <rich:modalPanel> in RichFaces 3?
I dont have 50 reputation to ask you more details in a comment, so i will answer directly hoping this is what you're asking about.
I think you mean that your problem is that the content of the ModalPanel is not rerendered dynamically. but for this you can wrap your table (or the components you want to update) in an <a4j:outputPanel> with ajaxRendered="true"
Setting ajaxRendered="true" will cause the <a4j:outputPanel> to be updated with each Ajax response for the page, even when not listed explicitly by the requesting component. This can in turn be overridden by specific attributes on any requesting components.
http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Containers.html#sect-Component_Reference-Containers-a4joutputPanel
In my code I have something like :
<a4j:commandLink id="timelineBtn" action="#{timelineBean.doGenerateLog}"
oncomplete="Richfaces.showModalPanel('timelinePnl');return false;"
value="#{labels['timeline.button.lbl']}"/>
that opens the modalPanel :
<rich:modalPanel style="width:800;height:600;" id="timelinePnl">
<a4j:outputPanel id="dataPanel" ajaxRendered="true">
<!-- your components to be updated go here -->
</a4j:outputPanel>
</rich:modalPanel>
So my content is updated with the results of my timelineBean.doGenerateLog method each time i open the modalPanel .
I have a problem with these two commandButton : Join and Leave.
I want to hide Join if I click on leave and vice-versa.
When I put ajax on false, there is no problem (but all the page is refresh and I don't find this optimal).
But when ajax attribut is on true with specific updating (cf comment in the code), the rendering is good but the new button whitch appear become inactive. If I click on it, nothing happens (well it's seems the actionListener trigger but the view is not refreshed, I have to manual refresh to see the difference)
Thanks for reading.
<h:form id="formWaitingList" rendered="#{connexion.connected}" >
<p:commandButton id="Join"
actionListener = "#{connexion.joinWaitingList()}"
rendered="#{!connexion.waiting}"
ajax="false"
<!-- ajax="true"
update="Join,Leave"-->
value="Join"/>
<p:commandButton id="Leave"
value="Leave"
ajax="false"
<!-- ajax="true"
udpate="Join,Leave"-->
rendered="#{connexion.waiting}"
actionListener ="#{connexion.leaveWaitingList()}" />
</h:form>
It seems that you're not entirely familiar with HTML/JavaScript. You know, JSF is basically a HTML/JavaScript(/CSS) code generator. Ajax updating works basically like this in JavaScript:
After sending the ajax request to JSF via XMLHttpRequest, retrieve a XML response which contains all elements which needs to be updated along with their client IDs.
For every to-be-updated element, use document.getElementById(clientId) to find it in the current HTML DOM tree.
Replace that element by new element as specified in ajax XML response.
However, if a JSF component has not generated its HTML representation because of rendered="false", then there's nothing in the HTML DOM tree which can be found and replaced. That totally explains the symptoms you're "seeing".
You basically need to wrap conditionally rendered JSF components in a component whose HTML representation is always rendered and then reference it instead in the ajax update.
For example,
<h:form>
...
<h:panelGroup id="buttons">
<p:commandButton ... update="buttons" rendered="#{condition}" />
<p:commandButton ... update="buttons" rendered="#{not condition}" />
</h:panelGroup>
</h:form>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Is it possible to create a4j:jsFunction that will call a method inside my managed bean and from there to perform forward to another jsf page ?
Thank's In Advance.
No, it's not possible because the <a4j:jsFunction> will create a javascript method available in the HTML that communicates with the server via Ajax. Instead, you could do something ugly like this:
<h:form id="myForm">
<a4j:jsFunction name="myJSFunction" action="#{myBean.jsLogic}"
oncomplete="document.getElementById('myForm:btnForward').click();" />
<a4j:commandButton id="btnForward" style="display: none;"
action="#{myBean.doForward}" />
</h:form>
In this case at the end of your js function, you will call the method of a <a4j:commandButton> (also <a4j:commandLink> or any other h component) that could do the navigation.
Well, it is not really a forward but you can do a redirect:
Just be sure that your corresponding navigation-case in faces-config file has the corresponding tag:
<redirect />
Then after the ajax call the browser will be redirected to the specified page.
This has the disadvantage in respect to Luiggi's response that makes two server calls, the ajax one and then the redirection.
As advantage, it makes cleaner code.
Hi I have a graphicalImage and I want a method in the backingBean to be fired up on clicking on the image.Below is the code snippet that i am using but it is not working. Please help.
<h:graphicImage value="../resources/images/delete_button.png"
onclick="editBean.deleteStudyPlan"
style="float:center;height: 18px; width:20px;"
title="Delete the studyplan"/>
You need to wrap it in a <h:commandLink> or <p:commandLink> and specify the action there.
<h:commandLink action="#{editBean.deleteStudyPlan}">
<h:graphicImage ... />
</h:commandLink>
Alternatively, you can just specify the image as a CSS background image of the command link or button.
The onclick surely isn't a method expression to a JSF backing bean action method. It's a JavaScript function handler. JavaScript is an entirely different language which runs in the webbrowser, working on the HTML code produced by JSF.