H:commandLink and Javascript

Question

Hi All,
I have a commandLink in which I pass parameter using <f:param>. This commnadLink is enclosed under <h:form>
This <h:form> is calling javascript function on its onSubmit event.
<h:form onSubmit="return validateForm()" >
   <h:commandLink action="#{bean.action}" >
       <f:param name="action"  value ="settings"/>
   </h:commandLink>
</h:form>Now my problem is when I click commandlink my javascript function is not executed. And there is no onclick available in commandLink tag.
I saw the html output of this code. h:commandLink puts its own onclick so it makes sense that it doesnot have onClick support. But in generated code commandLink forcefully submits the form. So ideally any function in form's onsubmit() should be called but in this case it is not.
Any suggestions ? What is going wrong here ?
Thanks

Answer 1

We have a similar problem here. Strictly speaking, it seems like Faces isn't really oriented toward javascript validation -- it's expected that'll happen server side.
If you have to have it client-side (and, yes, I know the arguments), you could try the approach I came up w/here. (I'd actually appreciate some comments on it -- it's a hack, but i'm wondering how bad it is. :)
Put the h:commandLink in a hidden div, with just a wee bit of extra javascript:
<div style="display:none;">
<h:commandLink id="okCmd" ....>....</h:commandLink>
<h:outputFormat escape="false" value="
  <script> var okCmd = \"{0}\"; </script>
  ">
  <yourExtremelyShortTaglibNamespacePrefix:clientIdParam componentId="okCmd" />
<h:outputFormat>
</div>write your own link whose onclick handler calls validateForm() and then calls the h:commandLink's onclick:
function okeyDokey() {
  if (validateForm())
    clickLink( okCmd);  // okCmd var defined elsewhere (see above)
}So, then we need the clientIdParam custom tag, and the clickLink() javascript function.
public class ClientIdParam extends UIParameter
   public static final String COMPONENT_TYPE = "canopy.ClientIdParam";
    * Returns the clientId of the component indicated by the 'componentId'
    * property.  {@link UIComponent#findComponent(String)} will be used to
    * find the component.
   public Object getValue()
      return findComponent( getComponentId())
         .getClientId( FacesContext.getCurrentInstance());
   // getComponentId() (omitted) is straightforward....
}javascript clickLink():
* Simulate a user clicking a link.  Originally written for simulating clicks
* on JSF commandLinks, so if you change  it, make sure it still works for
* that purpose.
function clickLink( aLinkId)
   var link = document.getElementById( aLinkId);
   link.onclick();
}So... am I insane? Did I miss a simple one-line solution as plain as the nose on my face? (I wouldn't mind finding out there's something better.)
John.