How to trigger a click event programmatically?

Question

I'm trying to click panel splitter collaplse/expand button with javascript / jquery, to no avail.

Here is an example of the splitters: http://jdevadf.oracle.com/adf-richclient-demo/faces/components/index.jspx;jsessionid=GTYNMf7Mq2JD6L4v38yCdTh2HLplhJYLTGc1J1TjZFwmpZjcqh1n!-294683649?_afrLoop=28596129526428344&_afrWindowMode=0&_afrWindowId=null#%2Fcomponents%2FpanelSplitter.jspx%40

As you can see, when you click the small buttons with arrows, the regions collapse. If I try to get element and click it, nothing happens.

$("dmoTpl:innerVerticalSplitter::i").onclick()

If I load jquery script and trigger click, also nothing happens. I'm a bit confused how this all works and why script clicks are ignored. Any ideas?

Answer 1

It is click() not onclick() with jQuery, but when I checked your code $ is not jQuery. Are you sure this page has jQuery on it?

Answer 2

Instead of trying to create a click event, if you know the event handler it is typically better to directly call that method directly. Here's an example in jQuery.

Setup of the event handler

var clickEventHandler = function(event) {
  ...
};

$('#some-button').click(clickEventHandler);

Calling it programmatically later

clickEventHandler();

Answer 3

I don't use JQuery, but here is an example that works using vanilla javascript and the <af:clientListener/> tag.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"&gt;
  <af:resource type="javascript">
    function toggleSplitter(evt) {
        comp = evt.getSource().findComponent('ps1');
        if (comp) {
            comp.setProperty("collapsed", !comp.getProperty("collapsed"));
        }
        else {
            alert('not found');
        }
    }
  </af:resource>
  <af:panelStretchLayout id="psl1">
    <f:facet name="center">
      <af:panelSplitter id="ps1">
        <f:facet name="first">
          <af:outputText value="First" id="ot1"/>
        </f:facet>
        <f:facet name="second">
          <af:panelFormLayout id="pfl1">
            <f:facet name="footer"/>
            <af:commandButton text="Toggle" id="cb1" immediate="true">
              <af:clientListener method="toggleSplitter" type="click"/>
            </af:commandButton>
            <af:outputText value="Second" id="ot2"/>
          </af:panelFormLayout>
        </f:facet>
      </af:panelSplitter>
      <!-- id="af_one_column_stretched"   -->
    </f:facet>
  </af:panelStretchLayout>
</jsp:root>

before click it is expanded:

and after click it is collapsed: