4 Replies Latest reply on May 6, 2008 7:33 PM by Sergey Smirnov

    Using 'vanilla' jQuery with RichFaces (!= 'rich:jQuery'): Wh

    Emmanuel Rousselle Newbie

      Hello,

      I'm using jQuery in my application the 'plain vanilla' way: a 'script' tag to include to source JS file, not by using a 'a:loadScript' tag or any 'rich:jQuery' tag.

      I've noticed that RichFaces will interfere with my application when I use RichFaces functionality that will re-render part of the page (such as when a 'a:commandLink' is clicked).

      What happens is that the window.jQuery object vanishes, and two new 'jQuery' (as far as I can tell) objects appear: oldJQuery and sbjQuery.

      Of course at that point it causes all sorts of Javascript errors which basically break the application.

      I would appreciate any feedback from anybody that has had to deal with this problem regarding:

      1) the proper way to load the jQuery library (and plugins) when using RichFaces
      2) whether using jQuery in 'stand-alone mode' (i.e. not using 'rich:jQuery' tags) supported at all with RichFaces?

      Thanks.

        • 1. Addtnl details
          Emmanuel Rousselle Newbie

          Not sure if that's the source of my issue but I've found the following:

          The problem described earlier happens once a 'a:commandLink' has triggered a navigation inside a 'a:include' area. This causes RichFaces to re-render the area with new content based on the navigation rules.

          In this particular case, the new content has a 'rich:calendar' component which loads it's own version of jQuery apparently (/prototype/a4j_3_1_3.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js), possibly creating an issue with the jQuery loaded from the 'script' tag.

          • 2. Re: Using 'vanilla' jQuery with RichFaces (!= 'rich:jQuery')
            Sergey Smirnov Master

            What does it mean "own version"?
            RichFaces loads script on-demand. I.e. if a particular component uses the particular library, the library is loaded. rich:calendar, rich:jQuery and some other components use jQuery. So, it is loaded when one of those component presents on the page.
            If several components that require jQuery are on the page, only one instance of jQuery.
            However, it you load jQuery using the unique path to js file, RichFaces has no idea that the instance is loaded and load one more.
            So, if you want to load jQuery, use the same path, that RichFaces uses to prevent overwriting .
            Otherwise, if you load one instance, enhance it with extension, this extension will be vanished if new instance of jQuery is loaded. It is a very expected behavior.

            • 3. Re: Using 'vanilla' jQuery with RichFaces (!= 'rich:jQuery')
              Emmanuel Rousselle Newbie

               

              "SergeySmirnov" wrote:
              What does it mean "own version"?


              That RichFaces loads a jQuery file from '/prototype/a4j_3_1_3.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js', which is different from 'js/jquery-1.2.3.js' (the 'stand-alone version').

              "SergeySmirnov" wrote:
              However, it you load jQuery using the unique path to js file, RichFaces has no idea that the instance is loaded and load one more.
              So, if you want to load jQuery, use the same path, that RichFaces uses to prevent overwriting.


              Do you mean this?

              <script type="text/javascript" src="/prototype/a4j_3_1_3.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js"></script>
              



              Or this?
              <a:loadScript "resource://jquery.js"/>


              "SergeySmirnov" wrote:

              Otherwise, if you load one instance, enhance it with extension, this extension will be vanished if new instance of jQuery is loaded. It is a very expected behavior.


              We're on the same page here. When I was making reference to a 'vanishing' jQuery in an earlier post, I was refering to this specifically:

              After the 'a:include' area had been loaded and the 'rich:calendar' rendered, JS code from the application (!= RichFaces code) would fail. For example, calls to 'jQuery.extend' (which isn't part of an extension but from jQuery itself) would fail with the following error message in firebug: 'jQuery.extend is not a function'.

              This lead me to look at the window object in order to see what was happening with window.jQuery. It had 'vanished' but two new objects had appeared: 'oldjQuery' and 'sbjQuery'.

              At that point I was really scratching my head...

              • 4. Re: Using 'vanilla' jQuery with RichFaces (!= 'rich:jQuery')
                Sergey Smirnov Master

                RichFaces is shipped with jQuery what is the latest at the moment of release. We do not make any modification it the query, but only code the latest from the original jQuery download.

                Do you mean this?
                <a:loadScript "resource://jquery.js"/>


                Most likely, it should be:

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


                If you have a FireBug or similar tool, look at the head of the DOM tree. If one more instance in mentioned after your jquery extension, you are in trouble.
                Your extension should be loaded after the jQuery and no other one after that.