title: How to embed jQuery/javascript in JSF XML
body: <p>I'd like to focus on the first <code>h:inputSecret</code> component in my RichFaces <code>rich:modalPanel</code>.  I've read I need to use the javascript I've included in the list below but it simply doesn't work (Win FF).  Can anyone tell me why not?  I've tried autofocussing on id="Form" and giving the panelGrid an id and using that to no avail. Any help appreciated.</p>
  
  <pre><code>                    &lt;rich:modalPanel id="PwdPanel" autosized="true" width="300" onshow="autofocus('FormNewP0')"&gt;
                      &lt;a4j:region id="FormCont"&gt;
                          &lt;a4j:form name="Form"&gt;
                              &lt;h:panelGrid columns="2" style="padding: 2px;"&gt;
                                  &lt;h:outputText value="New password&amp;#160;" /&gt;
                                  &lt;h:inputSecret id="FormNewP0"
                                      value="#{MyBacking.dbNewPwd0}" /&gt;
  
                                  &lt;h:outputText value="Re-enter new password&amp;#160;" /&gt;
                                  &lt;h:inputSecret id="FormNewP1"
                                      value="#{MyBacking.dbNewPwd1}" /&gt;
  
                                  &lt;h:outputText value="" /&gt;
                                  &lt;h:panelGroup&gt;
                                      &lt;a4j:commandButton value="Submit"
                                          action="#{MyBacking.dbPwdChange}"
                                          oncomplete="#{MyBacking.dbPwdError == true ? 'Richfaces.showModalPanel(\'ErrorPanel\');' : 'Richfaces.hideModalPanel(\'ErrorPanel\');Richfaces.hideModalPanel(\'PwdPanel\');'}"
                                          reRender="FormCont,FormText" /&gt;
                                      &lt;h:outputText value="&amp;#160;" /&gt;
                                      &lt;a4j:commandButton value="Cancel"
                                          onclick="#{rich:component('PwdPanel')}.hide();return false;" /&gt;
                                  &lt;/h:panelGroup&gt;
                              &lt;/h:panelGrid&gt;
                          &lt;/a4j:form&gt;
                      &lt;/a4j:region&gt;
                  &lt;/rich:modalPanel&gt;
                  &lt;script type="text/javascript" language="JavaScript"&gt;
                      function autofocus(containerId) {
                        var element = jQuery(":input:not(:button):visible:enabled:first", '#'+containerId);
                        if (element != null) {
                          element.focus().select();
                        }
                      }
                  &lt;/script&gt;    
  </code></pre>