Welcome!

Machine Learning Authors: Rene Buest, Liz McMillan, Jason Bloomberg, Pat Romanski, Rajeev Kozhikkattuthodi

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
"We do one of the best file systems in the world. We learned how to deal with Big Data many years ago and we implemented this knowledge into our software," explained Jakub Ratajczak, Business Development Manager at MooseFS, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Five years ago development was seen as a dead-end career, now it’s anything but – with an explosion in mobile and IoT initiatives increasing the demand for skilled engineers. But apart from having a ready supply of great coders, what constitutes true ‘DevOps Royalty’? It’ll be the ability to craft resilient architectures, supportability, security everywhere across the software lifecycle. In his keynote at @DevOpsSummit at 20th Cloud Expo, Jeffrey Scheaffer, GM and SVP, Continuous Delivery Busine...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), provided an overview of various initiatives to certify the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldwide re...
SYS-CON Events announced today that TechTarget has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. TechTarget storage websites are the best online information resource for news, tips and expert advice for the storage, backup and disaster recovery markets.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a way that makes the public cloud a non-starter. You’re looking at private cloud solutions based on hyperconverged infrastructure, but you’re concerned with the limits inherent in those technologies.
"Loom is applying artificial intelligence and machine learning into the entire log analysis process, from start to finish and at the end you will get a human touch,” explained Sabo Taylor Diab, Vice President, Marketing at Loom Systems, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is ...
SYS-CON Events announced today that Datanami has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datanami is a communication channel dedicated to providing insight, analysis and up-to-the-minute information about emerging trends and solutions in Big Data. The publication sheds light on all cutting-edge technologies including networking, storage and applications, and the...
SYS-CON Events announced today that EnterpriseTech has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. EnterpriseTech is a professional resource for news and intelligence covering the migration of high-end technologies into the enterprise and business-IT industry, with a special focus on high-tech solutions in new product development, workload management, increased effi...
For organizations that have amassed large sums of software complexity, taking a microservices approach is the first step toward DevOps and continuous improvement / development. Integrating system-level analysis with microservices makes it easier to change and add functionality to applications at any time without the increase of risk. Before you start big transformation projects or a cloud migration, make sure these changes won’t take down your entire organization.
Cloud promises the agility required by today’s digital businesses. As organizations adopt cloud based infrastructures and services, their IT resources become increasingly dynamic and hybrid in nature. Managing these require modern IT operations and tools. In his session at 20th Cloud Expo, Raj Sundaram, Senior Principal Product Manager at CA Technologies, will discuss how to modernize your IT operations in order to proactively manage your hybrid cloud and IT environments. He will be sharing bes...
A look across the tech landscape at the disruptive technologies that are increasing in prominence and speculate as to which will be most impactful for communications – namely, AI and Cloud Computing. In his session at 20th Cloud Expo, Curtis Peterson, VP of Operations at RingCentral, highlighted the current challenges of these transformative technologies and shared strategies for preparing your organization for these changes. This “view from the top” outlined the latest trends and developments i...
Automation is enabling enterprises to design, deploy, and manage more complex, hybrid cloud environments. Yet the people who manage these environments must be trained in and understanding these environments better than ever before. A new era of analytics and cognitive computing is adding intelligence, but also more complexity, to these cloud environments. How smart is your cloud? How smart should it be? In this power panel at 20th Cloud Expo, moderated by Conference Chair Roger Strukhoff, paneli...
SYS-CON Events announced today that MobiDev, a client-oriented software development company, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business...
Hardware virtualization and cloud computing allowed us to increase resource utilization and increase our flexibility to respond to business demand. Docker Containers are the next quantum leap - Are they?! Databases always represented an additional set of challenges unique to running workloads requiring a maximum of I/O, network, CPU resources combined with data locality.
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market acr...
SYS-CON Events announced today that Ayehu will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara California. Ayehu provides IT Process Automation & Orchestration solutions for IT and Security professionals to identify and resolve critical incidents and enable rapid containment, eradication, and recovery from cyber security breaches. Ayehu provides customers greater control over IT infras...
Artificial intelligence, machine learning, neural networks. We’re in the midst of a wave of excitement around AI such as hasn’t been seen for a few decades. But those previous periods of inflated expectations led to troughs of disappointment. Will this time be different? Most likely. Applications of AI such as predictive analytics are already decreasing costs and improving reliability of industrial machinery. Furthermore, the funding and research going into AI now comes from a wide range of com...
In this presentation, Striim CTO and founder Steve Wilkes will discuss practical strategies for counteracting fraud and cyberattacks by leveraging real-time streaming analytics. In his session at @ThingsExpo, Steve Wilkes, Founder and Chief Technology Officer at Striim, will provide a detailed look into leveraging streaming data management to correlate events in real time, and identify potential breaches across IoT and non-IoT systems throughout the enterprise. Strategies for processing massive ...