1 2 3 Previous Next 37 Replies Latest reply on Feb 11, 2013 6:31 AM by Roberto Cordoba

    Adding plugins to JQuery

    John Bailo Master

      RichFaces has a JQuery tag, but how do I give it access to additional libraries known as plugins?

        • 1. Re: Adding plugins to JQuery
          Bernard Labno Master

          RichFaces 3.3.3-Final ship with jQuery 1.3.2. When you include rich:jQuery component in your page the automatically jquery.js script is being loaded. If you want to use custom plugins then you need to include that rich:jQuery component and load your plugin from within body but not from head, cause you don't have any guarantee on order of scripts there.

          Probably we should write rich:jQueryPlugin component to solve this issue.

          • 2. Re: Adding plugins to JQuery
            John Bailo Master

            Ah, thank you very much!  I was trying to put the references in <HEAD> and they didn't seem to register at all.

             

            I actually don't want to use rich:JQuery but use a document.read() function directly within a richfaces/jsf page.

             

            I will try in <BODY> as you suggest.

            • 3. Re: Adding plugins to JQuery
              John Bailo Master

              I tried putting my code (<script> tags to *.js plugins + JQuery functions) in body, but it didn't work.

               

              I did some Googling and this article suggests that the process is quite a bit more involved:

               

              http://www.verborgh.be/articles/2010/02/12/supporting-jquery-clientbehavior-in-jsf-2-0/

               

              Is it really that complicated?   Guess so...

              • 4. Re: Adding plugins to JQuery
                Nick Belaevski Master

                John,

                 

                This article is about wrapping jQuery plugin as JSF 2.0 client behavior, not using it in general. What you can try is:

                1) Load jQuery and necessary script files using h:outputScript (JSF 2) or a4j:loadScript (JSF 1.2)

                2) Use rich:jQuery component to call plugin code

                • 5. Re: Adding plugins to JQuery
                  Bernard Labno Master

                  Here is component for RF 3.3.3.Final.

                   

                  <jQueryPlugin:jQueryPlugin src="jquery.someplugin.js"/>

                   

                  Where jquery.someplugin.js can be substituted to whatever script you ship with your webapp.

                   

                  This component will make sure that jQuery is loaded first.

                  1 of 1 people found this helpful
                  • 6. Re: Adding plugins to JQuery
                    John Bailo Master

                    I added this jar to my WEB-INF/lib in Eclipse.

                     

                    What should I add here to access the JQueryPlugin tags in jsp?

                     

                    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
                        xmlns:f="http://java.sun.com/jsf/core"
                        xmlns:a4j="http://richfaces.org/a4j"
                        xmlns:rich="http://richfaces.org/rich"
                        xmlns:h="http://java.sun.com/jsf/html" version="2.1">

                    • 7. Re: Adding plugins to JQuery
                      John Bailo Master

                      One thing that's not clear to me from reading the documentation is how to do a simple document.ready() usuing JQuery in a JSF/Richfaces page.

                       

                      Specifically, this is the plugin I want to use:

                       

                      http://philpalmieri.com/2009/09/jquery-session-auto-timeout-with-prompt/

                       

                      To enable it in my page, I need to add the function below...but how do I add a $(document).ready() function using the rich:JQuery tag?

                       

                      /** With Optional Overrides **/
                        $(document).ready(function(){
                          $(document).idleTimeout({
                            inactivity: 30000,
                            noconfirm: 10000,
                            sessionAlive: 10000
                          });
                        });
                      • 8. Re: Adding plugins to JQuery
                        Bernard Labno Master

                        <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
                            xmlns:f="http://java.sun.com/jsf/core"
                            xmlns:a4j="http://richfaces.org/a4j"
                            xmlns:rich="http://richfaces.org/rich"

                        xmlns:sandbox="http://richfaces.org/sandbox/jQueryPlugin"
                            xmlns:h="http://java.sun.com/jsf/html" version="2.1">

                        • 9. Re: Adding plugins to JQuery
                          Bernard Labno Master

                          <rich:jQuery selector="document" timing="onload" query="idleTimeout({inactivity....})"/>

                          • 10. Re: Adding plugins to JQuery
                            John Bailo Master

                            I added the plugin, but I'm getting an error about the src attribute:

                             

                            I put these tags inside the <HEAD>

                             

                            <sandbox:jQueryPlugin src="jquery/jquery-ui-1.7.2.custom.css"></sandbox:jQueryPlugin>
                              <sandbox:jQueryPlugin src="jquery/jquery-1.3.2.min.js"></sandbox:jQueryPlugin>
                               <sandbox:jQueryPlugin src="jquery/jquery-ui-1.7.2.custom.min.js"></sandbox:jQueryPlugin>
                                <sandbox:jQueryPlugin src="jquery/jquery-idleTimeout.js"></sandbox:jQueryPlugin>

                             

                            But it throws this exception:


                            org.apache.jasper.JasperException: /Users6.jsp(46,64) Unable to find setter method for attribute: src
                                org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:40)
                                org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:407)
                                org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:148)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.evaluateAttribute(Generator.java:2736)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.generateSetters(Generator.java:2965)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.generateCustomStart(Generator.java:2169)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.visit(Generator.java:1689)
                                org.apache.jasper.compiler.Node$CustomTag.accept(Node.java:1507)
                                org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2338)
                                org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2388)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.visit(Generator.java:1791)
                                org.apache.jasper.compiler.Node$UninterpretedTag.accept(Node.java:1223)
                                org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2338)
                                org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2388)
                                org.apache.jasper.compiler.Generator$GenerateVisitor.visit(Generator.java:1791)
                                org.apache.jasper.compiler.Node$UninterpretedTag.accept(Node.java:1223)
                                org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2338)
                                org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2388)
                                org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2399)
                                org.apache.jasper.compiler.Node$JspRoot.accept(Node.java:566)
                                org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2338)
                                org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2388)
                                org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2394)
                                org.apache.jasper.compiler.Node$Root.accept(Node.java:489)
                                org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2338)
                                org.apache.jasper.compiler.Generator.generate(Generator.java:3374)
                                org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:210)
                                org.apache.jasper.compiler.Compiler.compile(Compiler.java:306)
                                org.apache.jasper.compiler.Compiler.compile(Compiler.java:286)
                                org.apache.jasper.compiler.Compiler.compile(Compiler.java:273)
                                org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:566)
                                org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:316)
                                org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:336)
                                org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
                                javax.servlet.http.HttpServlet.service(HttpServlet.java:803)
                                com.sun.faces.context.ExternalContextImpl.dispatch(ExternalContextImpl.java:410)
                                com.sun.faces.application.ViewHandlerImpl.executePageToBuildView(ViewHandlerImpl.java:473)
                                com.sun.faces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:141)
                                org.ajax4jsf.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:100)
                                org.ajax4jsf.application.AjaxViewHandler.renderView(AjaxViewHandler.java:176)
                                com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:109)
                                com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
                                com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
                                javax.faces.webapp.FacesServlet.service(FacesServlet.java:266)
                                org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:530)
                                org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:206)
                                org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:290)
                                org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:388)
                                org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:515)
                                org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)

                            • 11. Re: Adding plugins to JQuery
                              Bernard Labno Master

                              Oh, I haven't tested it with JSP. Only with Facelets. I've recompiled the component but didn't have time for sample setup. I will be of until monday.

                              • 12. Re: Adding plugins to JQuery
                                John Bailo Master

                                I added the new .jar

                                1. It seems that the <sandbox:jQueryPlugin> tags have to go within the <f:view>

                                2. In the server.log this message appears:

                                  14:13:36,888 WARN  [JQueryPluginRenderer] Component j_id_jsp_224149256_1 does not have src attribute set.
                                  14:13:36,888 WARN  [JQueryPluginRenderer] Component j_id_jsp_224149256_2 does not have src attribute set.
                                  14:13:36,888 WARN  [JQueryPluginRenderer] Component j_id_jsp_224149256_3 does not have src attribute set.
                                  14:13:36,888 WARN  [JQueryPluginRenderer] Component j_id_jsp_224149256_4 does not have src attribute set.

                                  However, the page does render without errors this time.    I believe there is one more issue though, see my response to your post on setting up a document.ready().
                                • 13. Re: Adding plugins to JQuery
                                  John Bailo Master

                                  I believe their may be something wrong with that syntax.   The function doesn't appear to load or fire.

                                   

                                  I tried using:

                                   

                                  <rich:jQuery

                                       selector="document"

                                       timing="onload"

                                       query="idleTimeout({inactivity: 30000,noconfirm: 10000,sessionAlive: 10000})

                                  />

                                   

                                  I then tried a simple test to see if I could get my JSF page to throw an alert message using:

                                   

                                  <rich:jQuery
                                      selector="document"
                                      timing="onload"
                                      query="alert('test')"
                                  />

                                   

                                  The alert did not appear.  The tag renders as:

                                   

                                  <script type="text/javascript">//<![CDATA[
                                    jQuery(document).ready(function() {
                                      var selector = "document";
                                      try {
                                          selector = eval("document");
                                      } catch (e) {}
                                      jQuery(selector).alert('test');
                                  });
                                  //]]></script>

                                   

                                  I tested that script in a simple HTML document  (using the Google JQuery api), does not produce anything.

                                   

                                  <html>
                                  <head>
                                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



                                  <script type="text/javascript">//<![CDATA[
                                    jQuery(document).ready(function() {
                                      var selector = "document";
                                      try {
                                          selector = eval("document");
                                      } catch (e) {}
                                      jQuery(selector).alert('test');
                                  });
                                  //]]></script>



                                  </head>
                                  <body>
                                  Test
                                  </body>
                                  </html>

                                  • 14. Re: Adding plugins to JQuery
                                    Bernard Labno Master

                                    Warnings you get in logs are caused by this:

                                    <sandbox:jQueryPlugin/>

                                    While it should look like this:

                                    <sandbox:jQueryPlugin src="jquery/jquery-idleTimeout.js"/>

                                     

                                    Btw. You do not need to load jQuery alone. The plugin component will load it automatically.

                                     

                                    As to the problem with function on document load... There is no such method in jQuery as alert, so that's why your test fails. You can try this query : each(function(){alert('test')})

                                     

                                    This SHOULD work:

                                    <rich:jQuery

                                         selector="document"

                                         timing="onload"

                                         query="idleTimeout({inactivity: 30000,noconfirm: 10000,sessionAlive: 10000})

                                    />

                                    1 2 3 Previous Next