[Myfaces Wiki] Update of "JavascriptWithJavaServceFaces" by ChutYee

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by ChutYee:
http://wiki.apache.org/myfaces/JavascriptWithJavaServceFaces

New page:
##language:en

= JavascriptWithJavaServceFaces =

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 describe how to triggers 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 by JSF.

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

<h:form id=”userForm”>
<h:commandLink id=”lnkDeelteUser” 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 in 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 functions as well.

Below illustrates how to inject a line of code to open confirm dialog window, and the rendered HTML:

------------------------------------------------------------------------------------

<h:form id=”userForm”>
    <h:commandLink id=”lnkDeelteUser” 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 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. 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.