5 Replies Latest reply: Apr 17, 2012 5:56 AM by Tushar Apshankar RSS

    How to update (override) jQuery version in Richfaces (3.3.3 Final) ?

    m m Newbie

      Is possible to update jQuery to 1.4 version in Richfaces ?

      Or maybe override existing version with newer ??

        • 1. Re: How to update (override) jQuery version in Richfaces (3.3.3 Final) ?
          Ilya Shaikovsky Master

          exclude built-in jquery using context-param described there. http://community.jboss.org/wiki/Commonclientside#jsconflicts and add newer by using loadScript. This in general could potentially broke some components which could rely on api which was removed or changed. But I believe it worth to be tried because of backward compatibility of jquery 

          • 3. Re: How to update (override) jQuery version in Richfaces (3.3.3 Final) ?
            Christian Peter Expert

            <head>

            ....

            //save richfaces jquery:

            var $r = jQuery.noConflict();

            //load jquery:

            <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

            var $j = jQuery.noConflict();

            var j$ = null;

             

            //load other jquery plugins:

            <script type="text/javascript" src="jquery-hoverIntent.js</script>

            <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

            <script> var jQuery = $r; </script>

            ...

             

             

             

            then I'm able to use the new jQuery with $j

            • 4. Re: How to update (override) jQuery version in Richfaces (3.3.3 Final) ?
              henry katz Newbie

              I followed your suggestions above and am able to show that my jQuery ready() function binds after the following setup in <HEAD>:

               

               


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


                <script type="text/javascript">




              var $r = jQuery.noConflict();


                </script>


                <script type="text/javascript">




              var $j = jQuery.noConflict();


                </script>

                    <a:loadScript src="/js/jquery-1.7.1.js" />     

                    <a:loadScript src="/js/isg_lib.js" />

                    <a:loadScript src="/js/jshashtable-2.1.js" />           

                    <a:loadScript src="/js/jquery.numberformatter-1.2.3.js" />  

                <script type="text/javascript">




              var jQuery = $r;


                </script>

               

               

              my isg_lib.js contains the following:

               

              jQuery(document).ready(function(){

                $j(".firstinp").blur(function(event){

                updateMkt(event.target.id);

                });

                $j(".firstinp").click(function(event){

                selectOnFocus(event.target.id);

                });

                $j(".secondinp").blur(function(event){

                updateWt(event.target.id);

                });

                $j(".secondinp").click(function(event){

                selectOnFocus(event.target.id);

                });

              });

               

              and a breakpt in chrome is hit on the first line. All of the defined handlers precede this but none of the breakpt or alert() fire.

              My table which has these defined as follows:

               

               







              <rich:dataTable id="stratSelTable" width="640px" height="160px" columnClasses="btTblCol1,btTblCol2,btTblCol3"







              value="#{backTestBean.pickedStrats}" var="pickedStrat" enableContextMenu="false">







              <f:facet name="header">








              <h:outputText value=" "  style="width:100%;text-align:center"/>







              </f:facet>







              <rich:column  width="250px">








              <f:facet name="header">









              <h:outputText value="Strategy" />








              </f:facet>








              <h:outputText value="#{pickedStrat.name}" />







              </rich:column>












              <rich:column width="90px">








              <f:facet name="header">









              <h:outputText value="Sector" />








              </f:facet>








              <h:outputText value="#{pickedStrat.sector}" style="width:70px" styleClass="right" />







              </rich:column>















              <rich:column width="70px">








              <f:facet name="header">









              <h:outputText value="Gross/Net" />








              </f:facet>








              <h:outputText value="#{pickedStrat.gn}" style="width:70px" styleClass="right" />







              </rich:column>














              <rich:column width="60px">








              <f:facet name="header">









              <a4j:outputPanel id="totVal">










              <h:outputText value="Wt (#{backTestBean.totalWt})" />









              </a4j:outputPanel>








              </f:facet>








              <h:inputText id="wtInp" styleClass="firstinp right" value="#{pickedStrat.weight}" style="width:45px">









              <!-- a4j:support event="onchange" focus="mktInp#{row + 1}" action="#{backTestBean.changeStratWt(pickedStrat,'W')}"










              eventsQueue="default" reRender="mktInp,totVal,stratMsg" ajaxSingle="true" limitToList="true"/ -->








              </h:inputText>







              </rich:column>







              <rich:column width="110px">








              <f:facet name="header">









              <h:outputText value="Market Value $" />








              </f:facet>








              <h:outputText id="mktInp" styleClass="secondinp right" value="#{pickedStrat.marketValue}" style="width:90px">















              <f:convertNumber pattern="#,###"/>









              <!-- a4j:support event="onchange"  action="#{backTestBean.changeStratWt(pickedStrat,'V')}"  eventsQueue="default" reRender="stratSelTable" ajaxSingle="true" status="blendWtStatus"/ -->








              </h:outputText>
























              </rich:column>







              <rich:column width="60px">








              <f:facet name="header">









              <h:outputText value="Actions" />








              </f:facet>








              <h:outputText id="detAction" value="Detail" />








              <h:outputText id="delAction" value="Delete" />














              </rich:column>







              <!-- a4j:support event="onselectionchange" action="#{backTestBean.takeSelection(row)}" ajaxSingle="true" similarityGroupingId="default" / -->






              </rich:dataTable>

               

               

              all the a4j:support have been commented out. This POC works on my personal website without R/F or seam: http://www.iscs-i.com/FAMILY/jquery.html

               

              Any other examples showing this implementation?

               

              I had mixed results using the rich:jquery tag. Generally working in FF/Chrome but not in IE or requiring a page reload to activate the jquery ready function.

               

              Thanks,

              Henry

              • 5. Re: How to update (override) jQuery version in Richfaces (3.3.3 Final) ?
                Tushar Apshankar Newbie

                Thanks Christian!!

                Your solution worked for us.

                 

                Hi Henry,

                Please see a detailed blog entry over here:

                http://tudip.blogspot.in/2012/04/use-newer-version-of-jquery-with.html

                I guess you are not resetting the RF JQuery to its original version and hence getting this error.