1 Reply Latest reply on May 13, 2014 3:08 AM by Michal Petrov

    RF 4.3.2: rich:jQuery selector id always undefined

    Thomas Peeters Newbie

      Using Mojarra 2.1.26 and Richfaces 4.3.2-Final I can't seem to get inputmasks enabled on Ajax rendered components.  The selector is always 'undefined'.  Chrome Dev tools is always showing: Uncaught TypeError: undefined is not a function.

       

      At first I tried to use <script> tags with the JQuery calls for the input masks inside.  I got my info from here:

       

      http://stackoverflow.com/questions/7883262/how-use-mask-in-input-field-in-jsf-2-richfaces-4

       

      http://stackoverflow.com/questions/14491628/maskinput-dont-work-after-submit-form-in-jsf

       

      Though those links provided me with very useful information, it didn't get me a single step further.  I pretty much tried every possible ID with or without forms, using css classes, no cigar.

       

      Even quite the simple example doesn't seem to work.  I added a test inputtext on which I attempted to add an input mask, and even that one doesn't work.  See code excerpt below.  And also note the commented script piece of earlier attempts.

       

      <rich:popupPanel id="etemporaPopup" modal="true"

                                       resizeable="false" autosized="true"

                              >

                          <f:facet name="header">

                              <h:outputText value="#{msg['etemporaConsultationPage.addEtempora']}" />

                          </f:facet>

                          <f:facet name="controls">

                              <h:outputLink value="#" onclick="#{rich:component('etemporaPopup')}.hide(); return false;">

                                  X

                              </h:outputLink>

                          </f:facet>

                          <h:form id="formPopup">

                              <ui:include src="addEtempora.xhtml" />

                            

                              <h:inputText id="masktest" styleClass="masktestClass"/>

                              <rich:jQuery selector="#masktest" query="mask('9999999-99')" timing="domready"/>

                              <!--<script >-->

       

       

                                      <!--function addInputmasks(){-->

                                          <!--$("#form\\:masktest").mask("9999999-99");-->

                                      <!--}-->

       

       

       

       

                              <!--</script>-->

                              <!--<a4j:commandButton id="testInputmaskRerender" value="TEST" render="@form" oncomplete="addInputmasks()" immediate="true"/>-->

                          </h:form>

                      </rich:popupPanel>

       

      What I suspect is that something else on the page/template is breaking this.  So I copy-pasted the generated html in a text field and attached it.

       

      If anyone has some tips for me, by all means enlighten me.

       

      Thanks!