8 Replies Latest reply on Jul 12, 2013 2:40 AM by vinni298

    <rich:jQuery> named functions not working as documented

    vinni298

      Hi Community,

       

      I have found some strange behaviour with the <rich:jQuery> component when you implement named functions like described in the component reference:

       

      http://docs.jboss.org/richfaces/latest_4_3_X/Component_Reference/en-US/html/chap-Component_Reference-Layout_and_appearance.html#sect-Component_Reference-richjQuery-Named_queries

       

      If I implement the given code from the reference:

       

      <h:graphicImage width="50" value="/images/price.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)"  />
      <h:graphicImage width="50" value="/images/discount.png" onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseout="releasePic(this)"  />
      ...
      <rich:jQuery name="enlargePic" query="animate({width:options.pwidth})" />
      <rich:jQuery name="releasePic" query="animate({width:'50px'})"/>

       

      only the onmouseover calls will work. The prictures will get bigger but not smaller onmouseout.

      I found out that if I do some small changes to the onmouseout call it works fine:

       

      <h:graphicImage width="50" value="/images/price.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this,{})"  />
      <h:graphicImage width="50" value="/images/discount.png" onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseout="releasePic(this,{})"  />
      ...
      <rich:jQuery name="enlargePic" query="animate({width:options.pwidth})" />
      <rich:jQuery name="releasePic" query="animate({width:'50px'})"/>

      It only works when adding a second parameter to the call even if its empty.

       

      Now my question is: Is this a bug or is the documentation not up to date?

       

      Thank you very much

       

      Kind regards,

      Vincent

        • 1. Re: <rich:jQuery> named functions not working as documented
          michpetrov

          Not a bug, the function checks for the number of arguments, if there is only one it assumes it's options. Looks like the docs haven't been updated since RF 3.

           

          Edit: Come to think of it defaulting to options probably isn't the intended use, since "this" can only be passed as a direct argument. Do you think you can submit a patch?

          • 2. Re: <rich:jQuery> named functions not working as documented
            vinni298

            I'm very sorry I'm not used to GitHub and Jira. But I can provide you the JavaScript code that needs to be changed that the dafault parameter is the selector.

             

            The code can be found in the file: richfaces-components-ui-4.3.1.Final.jar\META-INF\resources\org.richfaces\jquery.component.js

             

            If you change the code (line 42) like described in the table below the default parameter will be the selector.

             

            Old CodeNew Code

            var createDirectQueryFunction = function(opts) {

                    var queryFunction = new Function("options", "arguments[1]." + opts.query);

             

                    return function() {

                        var element;

                        var options;

             

                        if (arguments.length == 1) {

                           //function(options) { ...query()... }

                            options= arguments[0];

                        } else {

                            //function(element, options) { ...query()... }

                            element = arguments[0];

                            options = arguments[1];

                        }

             

                        var selector = evaluateJQuery(element, opts.selector);

                        queryFunction.call(this, options, selector);

                    };

                };

            var createDirectQueryFunction = function(opts) {

                    var queryFunction = new Function("options", "arguments[1]." + opts.query);

             

                    return function() {

                        var element;

                        var options;

             

                        if (arguments.length == 1) {

                            //function(element) { ...query()... }

                            element = arguments[0];

                        } else {

                            //function(element, options) { ...query()... }

                            element = arguments[0];

                            options = arguments[1];

                        }

             

                        var selector = evaluateJQuery(element, opts.selector);

                        queryFunction.call(this, options, selector);

                    };

                };

             

            I tested this by editing my local richfaces jar file and this works fine for me.

            • 3. Re: <rich:jQuery> named functions not working as documented
              michpetrov

              No worries. I just thought you may want to fix it yourself.

              • 4. Re: <rich:jQuery> named functions not working as documented
                vinni298

                My only concern is when the selector is already defined in the <rich:jQuery> tag and you only want to pass parameter to the query. Then the method call would look like this: enlargePic({}, {pwidth:'60px'}).

                This looks not nice either. Maybe this was the reason why it was implemented like it is right now in the first place. I think there would be the possibility to check from which type the argument is if there is only one argument.

                But I really don't know from which type they are.

                • 5. Re: <rich:jQuery> named functions not working as documented
                  michpetrov

                  vinni298 wrote:

                   

                  My only concern is when the selector is already defined in the <rich:jQuery> tag and you only want to pass parameter to the query. Then the method call would look like this: enlargePic({}, {pwidth:'60px'}).

                  This looks not nice either. Maybe this was the reason why it was implemented like it is right now in the first place. I think there would be the possibility to check from which type the argument is if there is only one argument.

                  But I really don't know from which type they are.

                  Okay, but would you have a reason not to pass the selector tothe function? The selector attribute in the tag is useful when you don't want to define the function on the component itself:

                   

                  <rich:jQuery selector="img" event="mouseover" query="doSomething()" />
                  

                  In this case you don't need to define onmouseover for all the images. If you need to define it on a specific element, you will pass the selector to the function.

                  • 6. Re: <rich:jQuery> named functions not working as documented
                    vinni298

                    A possible case would be if you want to make changes to a special UIElement and set the values in the calling Elements.

                     

                    If you implement it like this:

                     

                    <somecomponent onclick="changeWidth({pwidth:'400px})" />


                    <rich:jQuery name="changeWidth" selector="#myImage" event="mouseover" query="animate({width:pwidth})" />

                     

                    Maybe there would be the possiblity to check in the javascript if there allready is a selector in the opts. In this case the script could take options as default in any other the selector.

                    As far as I understood everything right there is a opts.selector if the selector tag in the <rich:jQuery> is set. Or am I wrong?

                    • 7. Re: <rich:jQuery> named functions not working as documented
                      bleathem

                      Would you mind filing an issue for this?

                      https://issues.jboss.org/browse/RF

                       

                      Also, submitting a pull request via github can be as easy as clicking the edit button on the correct page:

                      https://github.com/richfaces4/components/blob/master/misc/ui/src/main/resources/META-INF/resources/org.richfaces/jquery.component.js

                       

                      "Github makes OSS easy"!

                      • 8. Re: <rich:jQuery> named functions not working as documented
                        vinni298

                        Ok I created an issue and a pull request. I hope I did everything right . Please tell me if not.