1 Reply Latest reply on Jan 12, 2009 4:08 PM by Alexander Smirnov

    RichFaces, JQuery and Portal

    Alexandre Simundi Newbie

      Hi,


      I tried use JQuery (and the plugin jquery.maskinput) with RichFaces on JBoss Portal, but didn't work.

      That is what I did do:

      jboss-portlet.xml: the file that imported the plugin for jquery

      <portlet-app>
       <portlet>
       <portlet-name>PessoasFisicasCRUD</portlet-name>
       <header-content>
       <link rel="stylesheet" type="text/css" href="/css/common.css"/>
      
       <script src="/js/jquery.maskedinput-1.2.1.pack.js" type="text/javascript"></script>
      
       </header-content>
       </portlet>
      </portlet-app>





      cadasto.xhtml: page that have the mask
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
      
      <f:view>
      
      
       <f:loadBundle basename="LabelMessages" var="labelBundle"/>
      
       <a4j:form ajaxSubmit="true" id="form" >
      
       <a4j:loadScript src="resource://jquery.js"/>
      
      
       <rich:panel header="#{labelBundle.sobrevoce}" id="PanelSobreVoce">
       <h:outputLabel value="#{labelBundle.cpftitular}" for="cpfTitular" />
       <h:inputText id="cpfTitular" value="#{PessoaFisicaController.pessoaFisica.cpf}" required="true">
       <f:validateLength minimum="14" maximum="14"/>
       <rich:jQuery selector="#cpfTitular" query="mask('999.999.999-99')" timing="immediate" />
       </h:inputText>
      
       <h:message for="cpfTitular" markerClass="inputError" labelClass="labelError" />
      
       </rich:panel>
      
      
       <a4j:commandButton action="#{PessoaFisicaController.salvar}"
       value="#{labelBundle.enviar}" type="submit"
       />
      
       </a4j:form>
      
      
      </f:view>
      
      </html>


      In the page i imported de jquery.js resource and put the mask in the inputText.


      but when I run this, the following error occurs (in the firebug console):


      jQuery(selector).mask is not a function
      http://localhost:8080/portal/portal/default/Cadastros/Pessoa+F%C3%ADsica
      Line 350

      jQuery(selector).mask is not a function
      http://localhost:8080/portal/portal/default/Cadastros/Pessoa+F%C3%ADsica
      Line 350


      Someone did something like this or know how resolve??


      Thanks,

      Simundi


        • 1. Re: RichFaces, JQuery and Portal
          Alexander Smirnov Master

          You are using two different ways for the JavaScript references. There is no warranty about loading order. In the Portlet 1.0, <a4j:loadScript > runs after the portal-wide definition in the jboss-portlet.xml, but Portlet 2.0 implementation could work in the different order.
          You should define both scripts in a same place. It would be better to define both by the <a4j:loadScript > component to let bridge for choice a best place for the script.