Welcome!

Machine Learning Authors: Zakia Bouachraoui, Pat Romanski, Yeshim Deniz, Elizabeth White, Liz McMillan

Related Topics: Machine Learning

Machine Learning : Blog Feed Post

Using RichFaces a4j:jsFunction Send an Ajax Request From Any JavaScript

For Power and Flexibility

There are four components in the a4j: tag library which enable you to send an Ajax request. They are a4j:commandButton, a4j:commandLink, a4j:support, and a4j:poll. All provide rather specific functionality. For example, a4j:commandButton will generate an HTML button that fires an Ajax request. a4j;commandLink will do the same but generates a link. a4j:support is always attached to another JSF component to enable sending an Ajax request based on some event supported by the parent component. a4j:poll which allows sending Ajax requests periodically. There is one more tag called a4j:jsFunction. This tags gives you a lot of power and flexibility. a4j:jsFunction lets you send an Ajax request from any user-defined JavaScript function. It can be a custom function or from any component-event as well. The good news is that it works just like any other tags I listed above, it has all the same attributes such as reRender, action, actionListener, bypassUpdates, ajaxSingle and so on.

Suppose you would like to send an Ajax request when the mouse moves over some plain HTML content on the page, in other words, when mouseover event occurs. We can’t use a4j:support because it can only be attached to another JSF component. One option is to write a custom JavaScript function that would fire an Ajax request, include any parameters from the page and of course participate in JSF life cycle. It’s probably not something we want to, right? We don’t do it with a4j:commandButton, so why would be suddenly write such JavaScript function? Well, as it turns out we don’t need to do it because a4j:jsFunction provides exactly what we need.

When we place a4j:jsFunction on a page, a JavaScript function will be rendered that fires a regular Ajax request, not much different than we use a4j:commandButton or a4j:support tags. All we need to do is just call this function.

<h:form> 
<table>
<tr>
<td onmouseover="setdrink('Espresso','grey')"
onmouseout="setdrink('','')">Espresso</td>
<td onmouseover="setdrink('Cappuccino', 'brown')"
onmouseout="setdrink('','')">Cappuccino</td>
<td onmouseover="setdrink('Tea', 'green')"
onmouseout="setdrink('','')">Tea</td>
</tr>
</table>
<a4j:jsFunction name="setdrink" reRender="drink" >
<a4j:actionparam name="param1" assignTo="#{bean.drink}"/>
<a4j:actionparam name="param2" assignTo="#{bean.bgColor}"/>
</a4j:jsFunction>
<h:outputText id="drink" value="#{bean.drink}"
style="BACKGROUND-COLOR: #{bean.bgColor};"/>
</h:form>

In above code we call what appears to be a regular JavaScript function named setdrink(..). In fact it is a regular JavaScript function. It’s defined via a4j:jsFunction tag. This is what the tag rendered on the page:

<script id="j_id2:j_id4" type="text/javascript">
//<![CDATA[setdrink=function(param1,param2)
{A4J.AJAX.Submit('j_id2',null,
{'similarityGroupingId':'j_id2:j_id4',
'parameters':{'param1':param1,'param2':param2,'j_id2:j_id4':'j_id2:j_id4'} } )};
//]]>
</script>

Notice that setdrink(..) takes two parameters. These parameters are passed to the server using a4j:actionparam tag. The name in a4j:actionparam is not important but should be set to something. The order is important. In other wordds, the value of the first parameters to the JavaScript function will be set into #{drink.bean} property in backing bean. Finally reRender attribute is used in the same way as with any other tag.

The managed bean looks like this:

public class Bean {
private String drink;
private String bgColor;
// getters and setters
}

Here is one more example:

<h:form> 
<h:inputText value="#{bean.drink}" />
<input type="button" value="Submit" onclick="fireAjax();"/>
<h:outputText id="drink" value="#{bean.drink}" />
<a4j:jsFunction name="fireAjax" reRender="drink"/>
</h:form>

Nothing is stopping us from doing something like this:

<script>
function sendAjaxForm(){
// custom code here
fireAjax();
}
</script>
<h:form>
<h:inputText value="#{bean.drink}" />
<input type="button" value="Submit" onclick="sendAjaxForm();"/>
<h:outputText id="drink" value="#{bean.drink}" />
<a4j:jsFunction name="fireAjax" reRender="drink"/>
</h:form>

If there was an action you wanted to invoke, then a4j:jsFunction would look like this:

<a4j:jsFunction name="fireAjax"  action="#{bean.someAction}" reRender="drink"/>

Let’s look at another example.

<h:form> 
<h:panelGrid columns="2">
<rich:pickList value="#{bean.selection}"
sourceListWidth="100px"
targetListWidth="100px"
onlistchanged="sendAjax();">
<f:selectItem itemLabel="Espresso" itemValue="Espresso"/>
<f:selectItem itemLabel="Cappuccino" itemValue="Cappuccino"/>
<f:selectItem itemLabel="Tea" itemValue="Tea"/>
</rich:pickList>
<rich:dataList id="selection" value="#{bean.selection}" var="drink">
<h:outputText value="#{drink}" />
</rich:dataList>
</h:panelGrid>
<a4j:jsFunction name="sendAjax" reRender="selection"/>
</h:form>

In above example, when the list changes an Ajax request is fired and rich:dataList component is updated to show the new list. This is just an example to illustrate how a4j:jsFunction works. I’m guessing that most developers would just nest a4j:support tag to achieve the same result:

<rich:pickList value="#{bean.selection}" 
sourceListWidth="100px"
targetListWidth="100px">
<f:selectItem itemLabel="Espresso" itemValue="Espresso"/>
<f:selectItem itemLabel="Cappuccino" itemValue="Cappuccino"/>
<f:selectItem itemLabel="Tea" itemValue="Tea"/>
<a4j:support event="onlistchanged" reRender="selection"/>
</rich:pickList>

If you were not sure how a4j:jsFunction tag works, I hope this posts makes it all clear. The tag is actually very simple, it works just like all other tags that fire an Ajax request but also provides a lot of flexibility. It’ s now possible to fire an Ajax request from any custom JavaScript function or client event without having to write a single line of JavaScr

Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.

CloudEXPO Stories
Jim leads Wasabi's product management, sales engineering, and customer support efforts. As a veteran of multiple startups and large enterprise organizations, Jim has deep experience in developing, delivering, and supporting products and services that provide security, scalability, and reliability to customers and partners. Prior to Wasabi, Jim served in product management and sales/support engineering roles at Oracle (via Acme Packet and Covergence), Ciena (via WaveSmith Networks), Lucent Technologies (via Ascend Communications and Cascade Communications) and GTE. Jim holds a BSEE from Northeastern University and a MBA from Babson College.
When building large, cloud-based applications that operate at a high scale, it’s important to maintain a high availability and resilience to failures. In order to do that, you must be tolerant of failures, even in light of failures in other areas of your application. “Fly two mistakes high” is an old adage in the radio control airplane hobby. It means, fly high enough so that if you make a mistake, you can continue flying with room to still make mistakes. In his session at 18th Cloud Expo, Lee Atchison, Principal Cloud Architect and Advocate at New Relic, will discuss how this same philosophy can be applied to highly scaled applications, and can dramatically increase your resilience to failure.
Despite being the market leader, we recognized the need to transform and reinvent our business at Dynatrace, before someone else disrupted the market. Over the course of three years, we changed everything - our technology, our culture and our brand image. In this session we'll discuss how we navigated through our own innovator's dilemma, and share takeaways from our experience that you can apply to your own organization.
Founded in 2002 and headquartered in Chicago, Nexum® takes a comprehensive approach to security. Nexum approaches business with one simple statement: “Do what’s right for the customer and success will follow.” Nexum helps you mitigate risks, protect your data, increase business continuity and meet your unique business objectives by: Detecting and preventing network threats, intrusions and disruptions Equipping you with the information, tools, training and resources you need to effectively manage IT risk Nexum, Latin for an arrangement by which one pledged one’s very liberty as security, Nexum is committed to ensuring your security. At Nexum, We Mean Security®.
The Transparent Cloud-computing Consortium (T-Cloud) is a neutral organization for researching new computing models and business opportunities in IoT era. In his session, Ikuo Nakagawa, Co-Founder and Board Member at Transparent Cloud Computing Consortium, will introduce the big change toward the "connected-economy" in the digital age. He'll introduce and describe some leading-edge business cases from his original points of view, and discuss models & strategies in the connected-economy. Nowadays, "digital innovation" is a big wave of business transformation based on digital technologies. IoT, Big Data, AI, FinTech and various leading-edge technologies are key components of such business drivers.