AdfActionEvent and AdfPage.PAGE.findComponent not working - Sample Provided

Question

Ladies and Gents,
Using JDev 11.1.2.3.0.
I just can't get this simple example to work.  On page load, I'm calling ADF's find component by id method, which for some reason, returns null.  I can do the same thing by using javascript's getElementById and that finds the component just fine.  However, if I use the getElementById and then push that into the AdfActionQueue, I get a different error 'Error: Object doesn't support property or method 'queueEvent''
Can anyone see off-hand what I'm doing wrong here?
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="home.jspx" id="d1">
            <af:form id="f1">
                <af:commandButton text="commandButton 1" id="myRefreshButton" action="#{myBean.onAction}"/>
            </af:form>
            <af:resource type="javascript" source="/resources/js/jqPlot/jquery.min.js"/>
            <af:resource type="javascript" source="/resources/js/jqPlot/jquery.jqplot.min.js"/>
            <af:resource type="javascript" source="/resources/js/jqPlot/plugins/jqplot.canvasTextRenderer.min.js"/>
            <af:resource type="javascript" source="/resources/js/jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"/>
            <af:resource type="javascript" source="/resources/js/jqPlot/plugins/jqplot.dragable.min.js"/>
            <af:resource type="css" source="/resources/js/jqPlot/jquery.jqplot.min.css"/>
            <af:resource type="javascript">
              function doClick() {
                  var clientId = 'myRefreshButton'; // id of the button in the page's HTML code
                  // This returns null
                  // var button = AdfPage.PAGE.findComponent(clientId);
                  // button is found but then receive error
                  var button = document.getElementById(clientId);
                  AdfActionEvent.queue(button, true);
              $(document).ready(function () {
                  doClick();
            </af:resource>
        </af:document>
    </f:view>
</jsp:root>

Answer 1

Hi Frank,
I agree manipulating the DOM directly is generally bad (I've watched those training videos!), but after doing some decent searching (with quite a bit of trial and error) I'm not sure there exists a purely ADF way of achieving a solution.
Inside of a region, I have a master (Companies) and a child (Orders) table relationship.  Within the same region, I also have a charting tool which displays the monthly order totals of the selected company.  A customer can select a company and see the related monthly orders in the orders table along with a graph showing the visual sales.  If I were using ADF DVTs, this would be pretty straightforward, but I am not.  To get this to work then, I have a few obstacles.
1) On jsff load, the chart must initialize with the displayed monthly order data.
2) On new customer select, the chart must refresh with the newly displayed order data.
The easiest way to update the chart would be to hook into the orders table component and, whenever the shown data refreshes or initializes, also refresh the chart.  However, I'm not sure where the hook is located for that so I'm back to my two obstacles.
For the first obstacle, ADF does not (to my knowledge) have an "on jsff load" option so I'm stuck with jquery's load and corresponding id lookup functions.  In my case, that load function looks for a hidden output text component's value whose getter returns the order table row's current monthly data.  This is somewhat of a hack that, in effect, calls a managed bean method from javascript.  Now that I have that data, I can input that into my chart and refresh.
For the second obstacle, I simply hook into the customer table's selection listener and after the current row is updated, retrieve the order table's current monthly data, refresh chart, etc.
The question I asked is a simplified version of overcoming the two obstacles above and while my jquery $('#myRefreshButton')[0] is extremely brittle, it was only meant as a quick demonstration.  One could make it less brittle by iterating through the returned array, making sure the desired element contained any regions / naming containers and had the myRefreshButton portion at the end of the id string.
What would be the desired ADF way of achieving this result?  Do you do something with your Data Visualization Tools that might be applicable here?  Is there a way to hook into the child table and refresh my chart any time child table refreshes or initializes?