Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to integrate JavaScript and JSF

DZone's Guide to

How to integrate JavaScript and JSF

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

JSF and JavaScript can combine forces to develop powerful applications. For example, let's see how we can use JavaScript code with h:commandLink and h:commandButton to obtain a confirmation before getting into action.

Getting ready
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it...
As you know the h:commandLink takes an action after a link is clicked (on the mouse click event), while h:commandButton does the same thing, but renders a button, instead of a text link. In this case, we place a JavaScript confirmation box before the action starts its effect. This is useful in user tasks that can't be reversed, such as deleting accounts, database records, and so on.

Therefore, the onclick event was implemented as shown next:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF and JavaScript example</title>
</h:head>
<h:body>
<!-- using h:commandLink and JavaScript -->
<h:form id="myCLForm">
<h:commandLink id="cmdlinkID" value="Delete record"
onclick="if (!confirm('Are you sure you want to delete the current record?'))
return false" action="#{bean.deleteRecord}"/>
</h:form>
<!-- using h:commandButton and JavaScript -->
<h:form id="myCBForm">
<h:commandButton id="cmdbtnID" value="Delete record"
onclick="if (!confirm('Are you sure you want to delete the current record?'))
return false" action="#{bean.deleteRecord}"/>
</h:form>
</h:body>
</html>

How it works...
Notice that we embed the JavaScript code inside the onclick event (you also may put it separately in a JS function, per example). When the user clicks the link or the button, a JS confi rmation box appear with two buttons. If you confirm the choice, the JSF action takes place, while if you deny it then nothing happens.

There's more...
You can use this recipe to display another JS box, such as prompt box or alert box.



You can find this recipe in JSF 2.0 Cookbook from Packt

 

From http://e-blog-java.blogspot.com/2011/03/how-to-integrate-javascript-and-jsf.html

Are you using Bitbucket to accomplish your company's mission? Share your company’s mission with #Forthecode for a chance to be featured on our homepage, our social media channels, or win a free t-shirt!

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}