6 Replies Latest reply on Apr 28, 2011 4:06 AM by vali_iva

    Richfaces with jQuery

    Chris Barton Newbie

      Hi all,

      I'm currently using jQuery UI in a Richfaces 3.2 & Seam environment as it offers a bit more flexibility over the user interface.

      I've integrated several Richfaces controls, such as normal DataTable and some A4J Command Buttons, and everything works OK. There is a need for a rich:listShuttle in a jQuery dialog - which renders perfectly. However, when I go to select an item, it doesn't select and has some funny behaviour. This may be due to some of the jQuery JS interfering, I'm not sure. I need a solution to get this working!

      Thanks,

      Chris

        • 1. Re: Richfaces with jQuery
          Chris Barton Newbie

          Sorry, I meant Richfaces 3.3.0 not 3.2 - my bad!

          • 2. Re: Richfaces with jQuery
            Ilya Shaikovsky Master

            please show the problematic page.

            • 3. Re: Richfaces with jQuery
              Chris Barton Newbie

               

              <ui:define name="extraHeadContent">
              
               <a4j:loadScript src="/js/jquery-1.3.2.min.js"></a4j:loadScript>
               <a4j:loadScript src="/js/jquery-ui-1.7.custom.min.js"></a4j:loadScript>
               <a4j:loadStyle src="/css/custom-theme/jquery-ui-1.7.1.custom.css"></a4j:loadStyle>
              
              
               <script language="Javascript">
               jQuery.noConflict();
              
               jQuery(document).ready(function(){
               jQuery("#tabs").tabs();
               });
              
              
               jQuery(function() {
               jQuery('#newUser').dialog({bgiframe: true,height: 340,width: 425,modal: true,autoOpen: false });
               });
              
               jQuery(function() {
               jQuery('#newGroup').dialog({bgiframe: true, height: 340, width: 495, modal: true, autoOpen: false});
               });
               </script>
              
               </ui:define>
              
               <ui:define name="body">
               <h:form id="entry" enctype="multipart/form-data">
               <h:messages globalOnly="true" styleClass="message" />
              
               <!-- New Group Dialog -->
               <div id="newGroup" title="New Group">
               <h:panelGrid id="pnlNewGroup" columns="1">
               <h:outputText value="* Name: " />
               <h:inputText id="newGroupName" value="#{userAdmin.newGroup.groupName}" />
               <h:outputText value="Description: " />
               <h:inputText value="#{newGroup.description}" />
               <hr />
               <h:outputText value="* Users: " />
               <a4j:region>
               <rich:listShuttle var="user" sourceValue="#{userAdmin.filteredUserList}" targetValue="#{userAdmin.selectedUsers}">
               <rich:column>
               <f:facet name="header">
               <h:outputText value="Users" />
               </f:facet>
               <h:outputText value="#{user.displayName}" />
               </rich:column>
               </rich:listShuttle>
               </a4j:region>
               </h:panelGrid>
               <h:panelGrid columns="2">
               <a4j:commandButton value="Save" action="#{userAdmin.saveGroup()}" image="/img/check.png" oncomplete="jQuery('#newGroup').dialog('close')" />
               <a4j:commandButton value="Cancel" image="/img/delete.png" oncomplete="jQuery('#newGroup').dialog('close')" />
               </h:panelGrid>
               </div>
              
               <a4j:commandButton action="#{userAdmin.createGroup()}" value="Create Group" oncomplete="jQuery('#newGroup').dialog('open')" />
              


              When I click the Create Group button it works fine and shows the dialog. However when I go to fling items from one list to another in the listshuttle it doesn't select an item, I can do a [SHIFT]+[LEFTCLICK] and select a range after some frantic clicking on the lists.

              Thanks for your help,

              Chris

              • 4. Re: Richfaces with jQuery
                Sergey Smirnov Master

                Most likely, you have a deal with conflict between jQuery shipped with RichFaces 3.3.0 (version 1.2.6) and the one you add to the page manually (version 1.3.2)

                Such mix should not work correctly.

                I guess, the jQuery ui will not work with 1.2.6. So, the only the way to go is to upgrade RichFaces to 3.3.1. Currently, it is 3.3.1 BETA1. Try this option.

                In case of RichFaces to 3.3.1, you have to:
                1. remove the loadScript where you load other copy
                2. add loadScript that reference to the version built-it jQuery:

                <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js"></a4j:loadScript>
                

                Step #2 is not required if you use at least one RichFaces component that utilize jQuery or use ALL script loading strategy.


                As an alternative (if you do not want to use BETA1), you can change the namespace for the jQuery you loading. I.e. use not 'jQuery', but something else. For example, 'myQuery'. If you change the namespace, the conflict should be gone.

                • 5. Re: Richfaces with jQuery
                  Nick Belaevski Master

                   

                  "SergeySmirnov" wrote:
                  As an alternative (if you do not want to use BETA1), you can change the namespace for the jQuery you loading. I.e. use not 'jQuery', but something else. For example, 'myQuery'. If you change the namespace, the conflict should be gone.
                  jQuery plugins are extending jQuery global object passed as an argument to initializer function, e.g. for jQuery.UI JS:
                  jQuery.ui || (function($) {
                   /* add stuff to jQuery object, $ == passed in jQuery object */
                   $.plugin = ...;
                  })(jQuery);
                  
                  So you should rename global variable in jquery.js (just in the beggining) and update all plugins to use new name.

                  • 6. Re: Richfaces with jQuery
                    vali_iva Newbie

                    Hi, does RF include jQuery UI out-of-the-box? I'm trying to render a range slider but it won't work. Instead I tried a ahow/hide effect is working fine.

                    Any suggestions?

                    Thanks.