myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
Subject [Myfaces Wiki] Update of "JavascriptWithJavaServceFaces" by ChutYee
Date Mon, 07 Nov 2005 11:15:58 GMT
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.

Mime
View raw message