How to embed jQuery/javascript in JSF XML

Question

Hello

I'd like to focus on the first h:inputSecret component in my RichFaces rich:modalPanel. 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.

                    <rich:modalPanel id="PwdPanel" autosized="true" width="300" onshow="autofocus('FormNewP0')">
                    <a4j:region id="FormCont">
                        <a4j:form name="Form">
                            <h:panelGrid columns="2" style="padding: 2px;">
                                <h:outputText value="New password&#160;" />
                                <h:inputSecret id="FormNewP0"
                                    value="#{MyBacking.dbNewPwd0}" />

                                <h:outputText value="Re-enter new password&#160;" />
                                <h:inputSecret id="FormNewP1"
                                    value="#{MyBacking.dbNewPwd1}" />

                                <h:outputText value="" />
                                <h:panelGroup>
                                    <a4j:commandButton value="Submit"
                                        action="#{MyBacking.dbPwdChange}"
                                        oncomplete="#{MyBacking.dbPwdError == true ? 'Richfaces.showModalPanel(\'ErrorPanel\');' : 'Richfaces.hideModalPanel(\'ErrorPanel\');Richfaces.hideModalPanel(\'PwdPanel\');'}"
                                        reRender="FormCont,FormText" />
                                    <h:outputText value="&#160;" />
                                    <a4j:commandButton value="Cancel"
                                        onclick="#{rich:component('PwdPanel')}.hide();return false;" />
                                </h:panelGroup>
                            </h:panelGrid>
                        </a4j:form>
                    </a4j:region>
                </rich:modalPanel>
                <script type="text/javascript" language="JavaScript">
                    function autofocus(containerId) {
                      var element = jQuery(":input:not(:button):visible:enabled:first", '#'+containerId);
                      if (element != null) {
                        element.focus().select();
                      }
                    }
                </script>    

Answer 1

May be you can try

jQuery("##{rich:clientId('FormNewP0')").focus().select();

Hope it help.

Answer 2

Have you included the jQuery library on your page. Try using the below make sure the jQuery is included,

<a4j:loadScript src="resource://jquery.js"/>

Refer to the below site for details,

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html