6 Replies Latest reply on Jul 17, 2012 3:51 AM by Sanjeev Shrestha

    Prototype and Jquery Conflict in Richfaces 4

    Sanjeev Shrestha Novice

      I have used both jquery.js and prototype.js in my code. Previously this setting worked perfectly in Richfaces 3.3.2 with Prototype version 1.6.0.3. I have seen the funtions and they use Jquery namespace. If Jquery.noconflict can solve the problem where should I put it. Translationg prototype.js is not and option becausae it would require some heavy code changes.

       

          The conflict i'm having is K.dispatchevent is not a funtion and K.attachevent is not a function.

       

      Any workaround would be very helpful. Thank you.

       

      Note I was using the following java script files while using Richfaces 3.3.2.

      1. framework.pack.js
      2. ui.pack.js
      3. mainTemplate.js
      4. showHide.js
      5. quintile.js
      6. checkfilter.js
      7. layout.js
      8. paginationKeyBoardHandler.js
      9. scriptaculous.js
      10. effects.js
      11. loadingDisplay.js
      12. fader.js
      13. menuUtils.js
      14. dropdownLink.js
      15. moo_fx.js
      16. component_support.js
      17. dummy.js
        • 1. Re: Prototype and Jquery Conflict in Richfaces 4
          iabughosh Master

          Hello Sanjeev,

          about jquery.js, i think you don't have to include it since RichFaces 4 jars already bundled with jquery.js file, you can use RichFaces 4.2.1 resource routing to solve these conflicts, follow this article.

           

          regards.

          • 2. Re: Prototype and Jquery Conflict in Richfaces 4
            Sanjeev Shrestha Novice

            Thank you for the reply @Ibrahim.

             

            I have not included jquery.js. I know that jquery.js is loaded by default when I use the <h:head> tag.

             

            According to many many forums I have options to

             

            1)Translate everything in jquery

             

            2) Substitute $ in prototype.js by $$$

             

            3)Use Jquery.noConflict

             

            Are you suggesting that i use a previous version of jquery in which the error did not come?

             

            I was trying to use Jquery.noConflict but I dont know where to use it.

             

            The javascript files that are loaded are bundled and loaded at once. And Translating everything to jquery will take a lot of time.

             

            I could just load the previous jquery used in Richfaces 3.3.2 from the method you suggested but fear it may lead to other problems in Richfaces 4 components.

             

            Could you please suggest any other options? Thank you.

            • 3. Re: Prototype and Jquery Conflict in Richfaces 4
              Sanjeev Shrestha Novice

              I have finally resolved the problem. Here are my findings. I hope this helps everyone who have been having these problems.

               

              Findings :-

               

              1) Richfaces 3.3.2 was based on prototype.js but now I think all the code have been changed to jquery. So the js files framework.pack.js and ui.pack.js have been unsupportive. These files are MISSING in Richfaces 4.

               

              2) I used to the <head/> tag before loading anthing else and then used <head > after it so that the jquery loaded first before any other libraries.

              So typically I did this

               

              <h:head/>

              <head>

              <script

              type="text/javascript" src="framework.pack,

              ui.pack,mainTemplate,showHide,quintile,checkfilter,layout,paginationKeyBoardHandler,scriptaculous,effects,loadingDisplay,

              fader,menuUtils,dropdownLink,moo_fx,component_support,dummy&amp;t=js">

              </head>

               

              3) I used JQuery.noConflict and lots of it. Typically in every js file I loaded. I just wrote JQuery.noConflict() and after that the usual Javascript code.

               

              For Example:

              In Fader.js

               

              JQuery.noConflict();

               

              //Fader's original code

              fade=....

               

              4) After that I used Jquery using JQuery instead of $.

              • 4. Re: Prototype and Jquery Conflict in Richfaces 4
                Sanjeev Shrestha Novice

                Hello Ibrahim,

                 

                I was using Richfaces 3.3.2 and used prototype.js. I found the prototype.js was used via frameworkpack.js and ui.pack.js. My question is have all the javascripts been changed to JQuery. And if I wanted to still use prototype could I be using it through frameworkpack.js and ui.pack.js. OR do i have to remove these two and use it through prototype.js.

                 

                Thank you for your help.

                • 5. Re: Prototype and Jquery Conflict in Richfaces 4
                  iabughosh Master

                  if i were in your place, i would prefer using prototype.js.

                   

                  regards.

                  • 6. Re: Prototype and Jquery Conflict in Richfaces 4
                    Sanjeev Shrestha Novice

                    Thank you @Ibrahim!!!!