11 Replies Latest reply on May 25, 2010 2:59 PM by Brian Abston

    jQuery plugins and richfaces

    Mikael Andersson Master

      I wonder how to integrate jQuery plugins into RichFaces, does anyone here have experience with this?


      I've been fishing for answers in the RichFaces forum but so far haven't gotten any answers.


      I found this post, jQuery UI/Draggables Plugin Problem, from someone who had some problems but solved them by changing the namespace of the plugins.


      I know next to nothing about jQuery and googling didn't solve it for me.


      I'm trying to use the UI/Dialog plugin, but get the following error:


      Error: E.scrollTop is not a function
      Source File: http://localhost:8080/app/js/jquery/jquery-ui-personalized-1.5.2.packed.js
      Line: 1
      



      My test code:


           <ui:define name="extraHeaderContent">
                <a4j:loadScript src="/js/jquery/jquery-ui-personalized-1.5.2.packed.js" />
                <style>
                     
                </style>
                
                <script language="JavaScript">
                     jQuery(document).ready(function(){
                         jQuery("#example").dialog();
                       });
                     
                </script>          
           </ui:define>
      
      



                <div id="example" style="display:none;" title="This is my title">I'm in a dialog!</div>
                
                <a href="#" onclick='jQuery("#example").dialog({buttons:{"Save":function() { jQuery(this).dialog("close");}}});'>Show it</a>
                <br/>
                <a href="#" onclick='jQuery("#example").dialog("close");'>Close it</a>
      



      Cheers,
      Micke

        • 1. Re: jQuery plugins and richfaces
          Mikael Andersson Master

          Solved. I think, at least now I got some action.


          Turns out some dimensions js file is needed, wasn't listed as a dependency and strangely enough I think the Dialog stuff worked in plain html test I did...


          -micke

          • 2. Re: jQuery plugins and richfaces
            Andrey Chorniy Newbie

            Hi Mikael, I'm trying to do just the same, but I was failed to use jquery.ui plugin for tabs (I add the dimensions plugin also)
            Please, could you describe the changes which you performed to make it working ?
            Are you changed the jquery.ui plugin javascript in some way?


            I use richfaces 3.1.4 - maybe the problem is in richfaces version ?

            • 3. Re: jQuery plugins and richfaces
              Mikael Andersson Master

              Hi


              The tabs just worked for me.


              Here is my xhtml which worked fine with tabs, hopefully this will help.



              <ui:composition  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:a4j="https://ajax4jsf.dev.java.net/ajax"
                     xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                     xmlns:s="http://jboss.com/products/seam/taglib"
                     template="/WEB-INF/layout/template.xhtml">
                     
                   <ui:param name="title" value="JQuery tabs"/>                    
                   
                   <ui:define name="extraHeaderContent">
                        <a4j:loadStyle src="/js/jquery/themes/flora/flora.all.css"></a4j:loadStyle>
                        <a4j:loadScript src="/js/jquery/ui/jquery.ui.all.js" />
                        <style>
                             
                        </style>
                        
                        <script language="JavaScript">
                             jQuery(document).ready(function(){
                                 jQuery("#example > ul").tabs();
                               });
                             
                        </script>          
                   </ui:define>
                   
                   <ui:define name="body">
                                  
                      <div id="example" class="flora">
                          <ul>
              
                              <li><a href="#fragment-1"><span>One</span></a></li>
                              <li><a href="#fragment-2"><span>Two</span></a></li>
                              <li><a href="#fragment-3"><span>Three</span></a></li>
                          </ul>
                          <div id="fragment-1">
                              <p>First tab is active by default:</p>
                              <pre><code>$('#example > ul').tabs();</code></pre>
              
                          </div>
                          <div id="fragment-2">
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                          </div>
                          <div id="fragment-3">
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                          </div>
                      </div>
              
                   </ui:define>
              </ui:composition>
              



              • 4. Re: jQuery plugins and richfaces
                Andrey Chorniy Newbie

                Thank you Mikael, it works for me but for 3.2.0 richfaces, unfortunately my project use 3.1.4 and we can't switch to 3.2.0
                Hope some workaround exists, possibly I have to modify plugin javascript..

                • 5. Re: jQuery plugins and richfaces
                  Ramanuja Reddy Newbie

                  thank you ..can u give the code of jquery.ui.all.js, flora.all.css please..

                  • 6. Re: jQuery plugins and richfaces
                    Thomas Modeneis Newbie
                    Hey man,

                    you can just do it:
                    <html xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:a="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich">

                    <script>
                       var $j = jQuery.noConflict();
                         
                         $j(document).ready(function(){
                              alert('oi');
                              $j('username').value('');
                              $j('username').focus();
                         });  
                    </script>
                    </html>
                    • 7. Re: jQuery plugins and richfaces
                      Thomas Modeneis Newbie

                      i forget something,
                      you have to add this:


                      <a:loadScript src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />



                      on same page where you want to make jquery call.


                      good job 4 all us.

                      • 8. Re: jQuery plugins and richfaces
                        Chris Simons Expert

                        It is true in more recent versions of RichFaces that jQuery is bundled with the libraries.


                        Therefore, to use jQuery I only have to do the following:


                        <a4j:loadScript src="resource://jquery.js" />


                        Next, if I have a plugin to include, such as the great meio mask:


                        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.meio.mask.min.js"/>


                        Then, to use jQuery within Javascript, I do, for example:




                        <script type="text/javascript">
                                jQuery(document).ready(function()
                                {
                                    jQuery.mask.masks = jQuery.extend(jQuery.mask.masks, {
                                           ssn: { mask: '999-99-9999', autoTab: false } });
                                    // call setMask function on the document.ready event
                                    jQuery('input:text').setMask();
                                });
                            </script>






                        • 9. Re: jQuery plugins and richfaces
                          Bruno Carneiro Newbie


                          Hi Folks,



                          I'm trying to use a jQuery plugin in a RichFaces and jBoss Seam project.
                          I saw this topic here, and I tried to do all the solutions listed, but none I got the result.
                          The problem is, RichFaces scripts use '$' character, and jQuery plugin too. So there is a conflict.
                          Here is my code. How can I solve this problem?





                          <a4j:loadStyle src="../../plc/css/cloud-zoom.css"></a4j:loadStyle>
                          <a4j:loadScript src="resource://jquery.js" />
                          <a4j:loadScript src="../../plc/javascript/cloud-zoom.1.0.1.min.js"></a4j:loadScript>
                          
                          <!--I use the jQuery plugin throw the style-class -->
                          <h:commandLink value="#{plcEntidade.imagem}" styleClass="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4"> 
                                 <h:graphicImage value="#{produto.imagem}" width="250" height="250" />
                          </h:commandLink>





                          Thanks in advance.

                          • 10. Re: jQuery plugins and richfaces
                            Chris Simons Expert

                            As the thread above shows, you have to use jQuery in-place of $ because of the conflict you mention.


                            It should work.

                            • 11. Re: jQuery plugins and richfaces
                              Brian Abston Newbie

                              Like Chris mentioned you can't use $(). You have to use JQuery(). $() is used to refer to prototype.js functions which RichFaces uses heavily.