3 Replies Latest reply on Sep 22, 2014 3:27 PM by flavioeasy

    cannot make rich:jQuery work

    flavioeasy
    flavioeasy Sep 21, 2014 11:10 AM

      Hi all,

       

      i'd like to give focus to the first input field when a page is rendered for the first time.

       

      I tried to use rich:jQuery tag to create a small function to give the focus, but it doesn't work.

       

      here is the code :

       

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:f="http://java.sun.com/jsf/core"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:ui="http://java.sun.com/jsf/facelets"

                      xmlns:es="http://java.sun.com/jsf/composite/esutils"

                      xmlns:rich="http://richfaces.org/rich">

       

          <rich:jQuery query="focus().select()" selector="#ESCPCalcCausEditPanelGrid :input:visible:enabled:first" name="focusFirst"/>

          <h:form>

              <rich:popupPanel id="ESCPCalcCausEditPanel" autosized="false" domElementAttachment="parent"

                               width="300" height="200" headerClass="panel-header-class" resizeable="true" onshow="focusFirst();" >

                  <f:facet name="header">

                      <h:outputText value="#{esCPCalcCausBeanC.headerEditPanel}"/>

                  </f:facet>

                  <f:facet name="controls">

                      <es:esUtilClosePanel varAction="#{rich:component('ESCPCalcCausEditPanel')}.hide();"/>

                  </f:facet>

                  <a4j:outputPanel ajaxRendered="true">

                      <rich:panel>

                          <h:panelGrid columns="2" id="ESCPCalcCausEditPanelGrid" >

                              <h:outputText value="#{mess.labelSoc}" styleClass="std-label" />

                              <h:outputText value="#{esCPCalcCausBeanC.socDes}" />

                              <h:outputText value="#{mess.labelCaus}" styleClass="std-label" />

                              <h:outputText value="#{esCPCalcCausBeanC.ESMyCap.ESMyCapPK.f3caus}" rendered="#{!esCPCalcCausBeanC.insert}"/>

                              <h:inputText id="F3_1" value="#{esCPCalcCausBeanC.ESMyCap.ESMyCapPK.f3caus}" size="3"

                                           maxlength="3" style="#{esCPCalcCausBeanC.getStyle('1')}" rendered="#{esCPCalcCausBeanC.insert}"/>

                              <h:outputText value="#{mess.labelVen1}" styleClass="std-label"/>

                              <h:inputText id="F3_2" value="#{esCPCalcCausBeanC.ESMyCap.f3spc}" size="1" maxlength="1"

                                           style="#{esCPCalcCausBeanC.getStyle('2')}" title="#{mess.labelVen1Tip}"/>

                          </h:panelGrid>

                          <rich:hotKey selector="#F3_1,#F3_2" key="return" onkeydown="return false;" />

                      </rich:panel>

                  </a4j:outputPanel>

       

                  <rich:panel>

                      <a4j:commandButton action="#{esCPCalcCausBeanC.confirmData}" title="#{mess.tipConferma}" image="/resources/images/check.png"

                                         oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESCPCalcCausEditPanel')}.hide(); " />

                  </rich:panel>

              </rich:popupPanel>

          </h:form>

      </ui:composition>

       

      any hint would be appreciated

       

      Flavio