How to override markPrevious and markNext methods on rich:suggestionBox javascript

Question

Hi,

I have a requirement where users should be able to navigate from the first to the last item in a rich:suggestionBox's list by pressing the key, and vice versa by pressing the .

I need to get this working on richfaces 3.3.x

The quest to get this done has led me to the javascript that is behind the rich:suggestionBox. You can find it at JBoss anon svn. The methods in question are markPrevious() and markNext().

This is how they are defined on the Suggestion.Base.prototype :

markPrevious: function() {
    if (this.index > 0) this.index--;
    //else this.index = this.entryCount - 1;
},

markNext: function() {
    if (this.index < this.entryCount - 1) this.index++;
    //else this.index = 0;
},

As you can see, the functionality that I need is there, but for some reason they placed it in comment. So I tried to override the methods by placing the following bit of javascript in my template file that is used by all my pages:

<script type="text/javascript">
    //<![CDATA[

    if(Suggestion) {
        function newMarkPrevious() {
            if (this.index > 0) this.index--;
            else this.index = this.entryCount - 1;
        }

        function newMarkNext() {
            if (this.index < this.entryCount - 1) this.index++;
            else this.index = 0;
        }

        Suggestion.Base.prototype.markPrevious = newMarkPrevious;
        Suggestion.Base.prototype.markNext = newMarkNext;
      }
    //]]>
    </script>

Now, if I inspect the Suggestion object with firebug, I can see that the methods indeed get overridden. However, all rich:suggestionBoxes on my pages still use the old implementation. So, I'm thinking that somehow, the objects behind the rich:suggestionBoxes get created before I override the prototype. And this is where I'm stuck. I don't know how I could get my version in there before any of those suggestionBoxes get created.

Has anyone got an idea on how to solve this?

Thanks,

Kim.

P.S. I realise that there is also the option of just adjusting the code directly in the richfaces-ui.jar, but I don't want to have a custom built jar.

Answer 1

Maybe you can place an a4j:support component in that rich:suggestionBox with a javascript onKeyUp event handler that calls a javascript function similar to this one:

function KeyCheck(e) {

   var KeyID = (window.event) ? event.keyCode : e.keyCode;
   switch(KeyID) {
     case 1:
         markNext function
         break;
     case 2:
         markPrevious function
         break;
   }
}

Answer 2

The answer was found by someone over on the richfaces community forum: http://community.jboss.org/message/563271

You should redefine RichFaces.Suggestion.prototype's functions like this:

if(RichFaces && RichFaces.Suggestion) { RichFaces.Suggestion.prototype.markPrevious = newMarkPrevious; RichFaces.Suggestion.prototype.markNext = newMarkNext; }

Because RichFaces.Suggetsion.prototype extends Suggestion.Base.prorotype's methods before you redifinition.