Using Javascript in JSF

By: Andrew Robinson  

Is there a place for Javascript with JSF? I would say definitely yes.

One very common scenario is to introduce a confirmation dialog associated with an action (for example deleting a record, canceling an edit). Another common scenario is to perform client side validation thus saving a round trip to the server. An example is to check that the ‘Password’ and ‘Confirm password’ are equal before posting back to the server.

The article describes how to trigger client side javascript functions with the <h:commandLink> and the <h:commandButton> components.

<h:commandLink>

Associating a javascript with a commandLink is not difficult, however in order to do it successfully you need to understand how the <h:commandLink> component is rendered into HTML by JSF.

The example below illustrates how the <h:commandLink> is rendered in HTML:


<h:form id=”userForm”>
<h:commandLink id=”lnkDeleteUser” value=”delete” action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" onclick=
"clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
      if (document.forms['userForm'].onsubmit()) 
document.forms['userForm'].submit();
} else {
      document.forms['userForm'].submit();
}
return false;
" 
id="userForm:lnkDeleteUser">delete</a>

There are a few points to note:

  • The <h:commandLink> is rendered as a hyperlink, <a href />

  • The hyperlink itself is “#”; it is basically a dummy value.

  • JSF generates a block of Javascript and it is tied to the ‘onclick’ event. Disregarding the details, it basically calls submit() which post the form to the server.

  • Line 3 is of particular interest – the id of this particular component (“userForm::lnkDeleteUser”) is saved to a hidden field. This is how the JSF engine knows which particular component does the postback and to invoke at the server side actions appropriately.

Most JSF component allows us to inject javascript associated with various client side DHTML events like onclick, ondoubleclick, onfocus etc. With <h:commandLink>, since JSF is already generating Javascript associated with the onclick event, this is where we need to inject our own javascript codes.

The scrpt below illustrates how to inject a line of code to open a confirm dialog window, and the resulting HTML:


<h:form id=”userForm”>
    <h:commandLink id=”lnkDeleteUser” value=”delete” 
            onclick=”if (!confirm('Are you sure you want to delete this record?')) return false”
            action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" onclick=
"if (!confirm('Are you sure you want to delete this record?')) 
        return false; 
clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
      if (document.forms['userForm'].onsubmit()) 
document.forms['userForm'].submit();
} else {
      document.forms['userForm'].submit();
}
return false;
" 
id="userForm::lnkDeleteUser">delete</a>

Another important point to note is that the javascript block should not return true under any circumstance. It is does so, the browser will proceed to perform <a href=”#”> – which is redirecting the browser to the dummy “#” page.

<h:commandButton>

The command button is a little simpler. The script below illustrates how to inject a confirmation dialog with <h:commandButton> and how it is rendered in HTML.


<h:commandButton id=”btnCancel” value=”Cancel” 
      onclick=”if (!confirm('You will lose all changes made. Are you sure?')) return false"
/>
<input id="userForm:btnCancel" name="userForm:btnCancel" 
      type="submit" value="Cancel" 
onclick="
if (!confirm('You will lose all changes made. Are you sure?')) return false;
clear_userForm();
"/>

Here the commandButton is rendered as a HTML submit button. If the javascript block returns true then the form is submitted as usual. If it returns false then the form submission is aborted.

The key to successful javascripting with JSF is to understand what is being rendered. Some basic understanding of javascipt goes a long way as well. Also be extra careful with the syntax, as most IDE do not have any support for Javascript. If you made a syntax error - for example missing out a closing bracket, your codes will simply fail silently.


Using javascript and command links to submit a form from a control event

It is quite often that you may want to submit immediately from a control (combo box changes, radio button is selected, etc.). There is no easy way to get a specific action to execute when this happens. One way is via JavaScript and hidden command links.

function clickLink(linkId)
{
  var fireOnThis = document.getElementById(linkId)
  if (document.createEvent)
  {
    var evObj = document.createEvent('MouseEvents')
    evObj.initEvent( 'click', true, false )
    fireOnThis.dispatchEvent(evObj)
  }
  else if (document.createEventObject)
  {
    fireOnThis.fireEvent('onclick')
  }
}

Then add a hidden link to your page (use CSS to ensure it is not visible to the user):

<t:commandLink id="hiddenLink" forceId="true" style="display:none; visibility: hidden;" 
action="#{put your action here}" actionListener="#{put action listener here}">
<!-- parameters, more action listeners, etc. -->
</t:commandLink>

You can see the use of "forceId". The reason for this is that we will be referencing this link using JavaScript and we need the ID and the client ID of a component is not easy to get from a JSF view.

Here is a check box control that will submit on change:

<t:selectBooleanCheckbox value="#{bean value goes here}" onclick="clickLink('hiddenLink');" /> 



Archived Comments

1. Hi Dear All

How to do strike-out in JSF, if you guys have any idea please give me sug

View Tutorial          By: Sandeep Mehta at 2012-11-21 06:54:06

2. Hi Dear All

How to do strike-out in JSF, if you guys have any idea please give me sug

View Tutorial          By: Sandeep Mehta at 2012-11-21 06:52:28

3. Hi.

Mi question is more simple. I want to call my sessionDestroyed method in my liste

View Tutorial          By: David at 2010-10-03 04:59:09

4. Hi,
I want to ask about how can I use javascript code in jsf with netbeans to build checkbox

View Tutorial          By: abozer alsyead at 2010-09-02 04:10:41

5. @ Qui:

You can set the CSS Style:
e.g.:
this.style.cursor = 'wait'"

View Tutorial          By: hache at 2010-06-22 02:02:56

6. Richface for JSF, can we do <div> tag move from right postion of the screen by click the div t
View Tutorial          By: Prakash at 2010-06-13 21:51:14

7. Thanks - very useful!
View Tutorial          By: Adam Musial-Bright at 2010-02-28 06:14:39

8. i am converting from Visualbasic 6 to java web app by richface3.3+ spring.
i meet a problem,

View Tutorial          By: Qui at 2010-01-05 07:26:13

9. i am converting from Visualbasic 6 to java web app by richface3.3+ spring.
i meet a problem,

View Tutorial          By: Qui at 2010-01-05 07:26:07

10. Hi, I have the following element:


<h:commandButton id="exportPDFB

View Tutorial          By: gardek at 2009-09-02 14:41:07

11. This one is helpful. Thanks

Is there any way to change the action of command link a

View Tutorial          By: Umesh Aawte at 2009-06-23 06:43:55

12. 1==how can we use vb.net web service data in JSF?
2==how to use controls in JSF?

View Tutorial          By: kumaraswamy at 2009-01-06 23:56:53

13. Great stuff!!!

The clickLink function helped me big time building my solution.

View Tutorial          By: Harro at 2008-10-13 07:25:26

14. Hi,
I have problem of calling javascript function in JSF. I am using Richfaces Components alo

View Tutorial          By: Shakti Prasad Priyakumar at 2008-06-06 06:11:52

15. excellent
View Tutorial          By: alok mishra at 2008-05-12 00:51:57

16. Hi, You can use a javascript array. Which means when you are retrieving the records from the databas
View Tutorial          By: Mashoud at 2008-05-04 02:54:38

17. Is there any way to show the dynamic bean value in the javascript.

i.e, if I am delet

View Tutorial          By: Bala at 2008-05-04 01:40:18

18. Hello Sir,

Is there a way to use JSF in javascript?
I want to store a value re

View Tutorial          By: rohit at 2008-04-02 09:07:41

19. Problem
The managed bean doesn't get updated when the above javascript is used.

View Tutorial          By: jsfuser at 2007-12-25 22:21:54


Most Viewed Articles (in JSF )

Latest Articles (in JSF)

Comment on this tutorial