Adding plugins to JQuery| JBoss.org Content Archive (Read Only)

1. Re: Adding plugins to JQuery

blabno Dec 8, 2010 3:10 PM (in response to jabailo)

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

jabailo Dec 8, 2010 3:55 PM (in response to blabno)

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

jabailo Dec 8, 2010 5:43 PM (in response to jabailo)

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

nbelaevski Dec 8, 2010 6:52 PM (in response to jabailo)

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

blabno Dec 9, 2010 12:23 PM (in response to nbelaevski)

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.

jQueryPlugin-3.3.3.Final.jar 8.8 KB

1 of 1 people found this helpful

6. Re: Adding plugins to JQuery

jabailo Dec 9, 2010 3:01 PM (in response to blabno)

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

jabailo Dec 9, 2010 3:11 PM (in response to nbelaevski)

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

blabno Dec 9, 2010 3:19 PM (in response to jabailo)

<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

blabno Dec 9, 2010 3:26 PM (in response to jabailo)

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

10. Re: Adding plugins to JQuery

jabailo Dec 9, 2010 8:55 PM (in response to blabno)

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

blabno Dec 10, 2010 3:13 AM (in response to jabailo)

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.

jQueryPlugin-3.3.3.Final.jar 9.2 KB

12. Re: Adding plugins to JQuery

jabailo Dec 10, 2010 2:31 PM (in response to blabno)

I added the new .jar

It seems that the <sandbox:jQueryPlugin> tags have to go within the <f:view>
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

jabailo Dec 10, 2010 2:42 PM (in response to blabno)

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:

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

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

14. Re: Adding plugins to JQuery

blabno Dec 13, 2010 2:48 AM (in response to jabailo)

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})

/>