6 Replies Latest reply on Nov 6, 2009 3:51 PM by nbelaevski

    jQuery 1.3 fails on FF after a4j update

    stephen.friedrich

      In my app I am using only a4j and I use my own version of jQuery (1.3.2).
      All is fine on IE.
      On FF after an ajax request, jQuery selectors fail in strange ways (like jQuery('td .foo') incorrectly returns nothing, but jQuery('.foo').parent() correctly returns a td).

      Any ideas?

        • 1. Re: jQuery 1.3 fails on FF after a4j update
          stephen.friedrich

          Well apparently jQuery 1.3 is sensitive to the case in a DOM element's nodeName.
          In a non-xml document $('td') will only match upper case node names "TD".

          The initial request in fact has the upper case node name in the td element.

          However after the a4j request the td element has nodeName "td" (lower case) and jQuery 1.3 no longer finds it.

          Haven't you stumbled across this when including jQuery 1.3 for RichFaces 3.1.1.
          Or maybe there already is a solution?

          • 2. Re: jQuery 1.3 fails on FF after a4j update
            adubovsky

            Hi stephen.friedrich

            I could not reproduce problem on our local environment. Following code works fine for me in FF3 and IE7. Could you please provide more detailed info and source code?


            <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
            <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
            <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
            <html>
            <head>
            <title>Custom Component</title>
            
            <style type="text/css">
            .test {
             display: none;
            }
            </style>
            
            <script type="text/javascript" src="/rich-demo/js/jquery.js"></script>
            
            <script type="text/javascript">
             jQuery.noConflict();
            
             function addClass() {
             jQuery('td.foo').addClass('test');
             return false;
             }
            
             function removeClass() {
             jQuery('td.foo').removeClass('test');
             return false;
             }
             </script>
            
            </head>
            <body>
            <f:view>
             <a4j:form>
             <table>
             <tbody>
             <tr>
             <td>1</td>
             <td class="foo">2</td>
             <td>3</td>
             </tr>
             </tbody>
             </table>
             <br />
             <h:commandButton value="add" onclick="addClass();" />
             <h:commandButton value="remove" onclick="removeClass();" />
             <br />
             <a4j:commandButton value="a4jSubmit"></a4j:commandButton>
             </a4j:form>
            </f:view>
            </body>
            </html>


            • 3. Re: jQuery 1.3 fails on FF after a4j update
              stephen.friedrich

              jQuery only fails for elements that have been reRender'ed.
              I modified your example to make it show the bug.

              I don't have a working project with JSP lying around, so I changed the code to use facelets. I also had to add a "return" in the onclick handlers to make them stop the submit?!

              <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:a4j="http://richfaces.org/a4j"
               >
               <head>
               <title>Custom Component</title>
              
               <style type="text/css">
               .test {
               display: none;
               }
               </style>
              
               <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
              
               <script type="text/javascript">
               jQuery.noConflict();
              
               function addClass() {
               jQuery('td.foo').addClass('test');
               return false;
               }
              
               function removeClass() {
               jQuery('td.foo').removeClass('test');
               return false;
               }
               </script>
               </head>
              
               <body>
               <a4j:form id="form">
               <table>
               <tbody>
               <tr>
               <td>1</td>
               <td class="foo">2</td>
               <td>3</td>
               </tr>
               </tbody>
               </table>
               <br/>
               <h:commandButton value="add" onclick="return addClass();"/>
               <h:commandButton value="remove" onclick="return removeClass();"/>
               <br/>
               <a4j:commandButton value="a4jSubmit" reRender="form"></a4j:commandButton>
               </a4j:form>
               </body>
              </html>


              • 4. Re: jQuery 1.3 fails on FF after a4j update
                adubovsky

                Thanks for your participation.
                I have opened issue in jira https://jira.jboss.org/jira/browse/RF-6417

                • 5. Re: jQuery 1.3 fails on FF after a4j update
                  lucas.lins

                  we have found a work around for this issue.

                  Just extract jquery from richfaces-impl-3.2.1.GA.jar and put it on richfaces-impl-3.2.2.SR1.jar.

                  I hope my comments help someone.

                  • 6. Re: jQuery 1.3 fails on FF after a4j update
                    nbelaevski

                     

                    "lucas.lins" wrote:
                    we have found a work around for this issue.

                    Just extract jquery from richfaces-impl-3.2.1.GA.jar and put it on richfaces-impl-3.2.2.SR1.jar.

                    I hope my comments help someone.


                    Lucas,

                    You are downgrading to 1.2.x version of jQuery then, and this is potentially risky operation, because some RF components can be using 1.3.x jQuery functions. One more point: better use jQuery.js from 3.3.0.GA as it includes the latest of 1.2.x versions.