How to Filter a table (QBE) using javascript

I recently had a requirement to double click some text on the page that would cause a table elsewhere on the page to populate one of the table column headers (Query by example) inputs and filter the table.   This can be done programmatically in a backing bean.  Here is a link to a forum thread for doing that and a sample can be downloaded from this page or directly with this link Programmatically Manipulating a Table's QBE Filter Fields.   A different solution I came up with performs this action on the client side and was pretty simple to implement.   I was able to add the code for doing this to the jspx file while the server was running and test it without even having to restart the server.  I performed the following steps

• Create a filter facet for the column you need to populate.  Add an inputText inside this facet and set it to be a clientComponent so that you can retrieve it on the clientSide by Id. (example)
  
               <f:facet name="filter">
                  <af:inputText value="#{vs.filterCriteria.MyColumnName}"
  
                                simple="true"
                                binding="#{requestScope.myColumnName}"
                                id="ncode" clientComponent="true"/>
    </f:facet>
• Add javascript method to a .js file loaded by your page that looks like this
  
  function filterByValue(){
    var flter= AdfPage.PAGE.findComponent(myColumnName); // retrieve filter input text
    flter.setValue("SomeValue")'  // populate the filter with your value
    // parent of the filter component is the table component
    flter.getParent().getPeer()._handleFilterCellAction(); // this submits the value (like hitting enter)
  }
   
• The above code assumes there is a variable on the page named myColumnName contain the full component id of the inputText you are populating.  There are various ways to get this ID.   I used the technique described in my other blog posting here and set it using this script at the top of the page.  Note that ColumnName is an arbitrary name given to the component binding and is bound to requestScope so that it can be set into this javascript variable when the page loads.
  
  <trh:script text="var myColumnName= '#{ClientIdMap['requestScope.myColumnName']}';" /> 
• Add a client listener to the component that you want to double click on
  
  <af:clientListener method="filterCollectorComments"  type="dblClick" /> 

That's is everything needed.  Double clicking the component will populate my filter table header and submit it.