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:23:06 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

------------------------------------------------------------------------------
  ##language:en
- 
- = JavascriptWithJavaServceFaces =
  
  Is there a place for Javascript with JSF? I would say definitely yes. 
  
@@ -10, +8 @@

  
  The article describe how to triggers client side javascript functions with the <h:commandLink>
and the <h:commandButton> components. 
  
- == <h:commandLink> ==
+ === <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';
@@ -34, +31 @@

  return false;
  " 
  id="userForm:lnkDeleteUser">delete</a>
- 
  -------------------------------------------------------------------------------------
  
  There are a few points to note:
@@ -49, +45 @@

  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” 
+     <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; 
@@ -71, +64 @@

  }
  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.
@@ -82, +73 @@

  
  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.
  

Mime
View raw message