Hacking the rich:pickList using jQuery

Another post about the JSF 1.2 upgrade.

Short description of the problem:

We had hacked together a custom pick list from before. After upgrading to newest JSF and newest RichFaces, we could use a standard pick list, except that the standard pickList didn't support any means of showing details about the selected item.

We could of course tried to subclass the RichFaces pick list component, but then we would be stuck with maintaining it. So instead we decided to just throw in a quick jQuery script. Of course, it would also be a good opportunity to learn a little more jQuery. (Yes, I've just started learning jQuery, so if you think you've got a better way to solve the problem, please leave a comment.)

Getting an event when somebody selects a cell

<ui:define name="perPageJavaScript">
<script>
jQuery(document).ready(function(){
                jQuery(".rich-picklist-source-cell").click(function () {
                               updateFooBar(jQuery(this).text());
                });
    });</script>
</ui:define>

Using the event to update a part of the page

<a4j:form>
    <a4j:jsFunction name="updateFooBar"
        reRender="fooBarTbl,fooBarBazTbl">
    <a4j:actionparam name="param1" 
        assignTo="#{fooBarBean.selectedFoo}" />
    </a4j:jsFunction>
</a4j:form>

the perPageJavaScript is just a way to insert a custom JavaScript into the header of one particular page.

Hope this helps someone. I guess I'm not the only one who needs this construct.