ADF and JQuery: How can I get the data back to server listener.

Question

Jdeveloper 11g Version 11.1.1.2.0
I use Jquery to draw the signature. How can I get the svgOutput back to my server listener.???
e.getSource give me the error e.getSource is not function.
Both of function saveSignatureCapture(which calling from ADF button) and $('#save-output').click(function (event) can not send the the data back to my server listener.
Thanks.
<?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:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="dSignature" title="Signature Capture">
      <af:resource type="javascript" source="../resources/lib/jquery/jquery-1.4.2.min.js"/>
      <af:resource type="javascript" source="../resources/js/jquery.drawbox.js"/>
      <af:resource type="javascript">
        var svgOutput = '';
        function saveSignatureCapture(e) {
            var signatureText = $('#drawbox-data').val();
            var source = e.getSource();
            var type = 'saveSignatureCapture_ServerListener';
            var immediate = true;
            var params = {
                signatureText : signatureText
            AdfCustomEvent.queue(source, type, params, immediate);
        function beginSignatureCapture(e) {
            $('#drawbox').drawbox( {
                caption : 'This is a caption', lineWidth : 3, lineCap : 'round', lineJoin : 'round', colorSelector : true
            $('#view-output').click(function () {
                svgOutput = window.open('data:image/svg+xml,' + $('#drawbox-data').val());
                svgOutput.document.close();
                return false;
            $('#save-output').click(function (event) {
                var signatureText = $('#drawbox-data').val();
                var source = $(document);
                var type = "saveSignatureCapture_ServerListener";
                var immediate = true;
                var params = {
                    signatureText : signatureText
                AdfCustomEvent.queue(source, type, params, immediate);
                return false;
        $(document).ready(beginSignatureCapture);
      </af:resource>
      <af:panelStretchLayout id="psSignature">
        <f:facet name="bottom"/>
        <f:facet name="center">
          <af:panelGroupLayout id="pgSignature" layout="vertical">
            <f:verbatim>
              <div id="divSignature">
                <canvas id="drawbox" width="600" height="200">
                  <p>Your browser does not support &lt;canvas&gt;</p>
                </canvas>
              </div>
              <br/>
              <br/>
              <a href="#" id="view-output">View Rendered SVG Output</a>
              <br/>
              <br/>
              <a href="#" id="save-output">Save Signature</a>
            </f:verbatim>
            <af:spacer width="10" height="10" id="s10"/>
            <af:panelGroupLayout id="pghl14" layout="horizontal" halign="center">
              <af:commandButton text="Save Signature" id="cbSaveSignatureButtonId" partialSubmit="true">
                <af:clientListener method="saveSignatureCapture" type="click"/>
                <af:serverListener type="saveSignatureCapture_ServerListener"
                                   method="#{backingBeanScope.mainBackingBean.saveSignatureCapture_ServerListener}"/>
              </af:commandButton>
            </af:panelGroupLayout>
          </af:panelGroupLayout>
        </f:facet>
        <f:facet name="start"/>
        <f:facet name="end"/>
        <f:facet name="top"/>
      </af:panelStretchLayout>
    </af:document>
  </f:view>
</jsp:root>Edited by: user553450 on Sep 17, 2010 4:02 PM
Edited by: user553450 on Sep 17, 2010 4:13 PM

Answer 1

Hi Frank,
Thank you so much for your advice, I got lot of knowledge from your book and articles since I am in transition from forms to JDeveloper.
By surrounding <af:panelStretchLayout id="psSignature"> with <af:form id="f1">
Now the following code is work on Firefox, everything fine, I can get the data back and call my server listener as I expected.
<?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:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" title="Signature Capture">
      <af:resource type="javaScript" source="../resources/js/excanvas.js"/>
      <af:resource type="javascript" source="../resources/lib/jquery/jquery-1.4.2.min.js"/>
      <af:resource type="javascript" source="../resources/js/jquery.drawbox.js"/>
      <af:resource type="javascript">
        function saveSignatureCapture(e) {
            var signatureText = $('#drawbox-data').val();
            alert(signatureText);
            var source = e.getSource();
            var type = 'saveSignatureCapture_ServerListener';
            var immediate = true;
            var params = {
                signatureText : signatureText
            AdfCustomEvent.queue(source, type, params, immediate);
        function beginSignatureCapture(e) {
            var cmd = "$('#drawbox').drawbox({lineWidth:3,lineCap:'round',lineJoin:'round',colorSelector:true});";
            if (navigator.userAgent.indexOf('MSIE') !=  - 1) {
                setTimeout(cmd, 1000);
            else {
                $('#drawbox').drawbox( {
                    caption : 'This is a caption', lineWidth : 3, lineCap : 'round', lineJoin : 'round', colorSelector : true
      </af:resource>
      <af:form id="f1">
        <af:panelStretchLayout id="psSignature">
          <f:facet name="bottom"/>
          <f:facet name="center">
            <af:panelGroupLayout id="pgSignature" layout="vertical">
              <f:verbatim>
                <canvas id="drawbox" width="600" height="200">
                  <p>Your browser does not support &lt;canvas&gt;</p>
                </canvas>
              </f:verbatim>
              <af:spacer width="10" height="10" id="s10"/>
              <af:panelGroupLayout id="pghl14" layout="horizontal" halign="center">
                <af:commandButton text="Save Signature" id="cbSaveSignatureButtonId" partialSubmit="true">
                  <af:clientListener method="saveSignatureCapture" type="click"/>
                  <af:serverListener type="saveSignatureCapture_ServerListener"
                                     method="#{backingBeanScope.mainBackingBean.saveSignatureCapture_ServerListener}"/>
                </af:commandButton>
              </af:panelGroupLayout>
            </af:panelGroupLayout>
          </f:facet>
          <f:facet name="start"/>
          <f:facet name="end"/>
          <f:facet name="top"/>
        </af:panelStretchLayout>
      </af:form>
      <af:clientListener method="beginSignatureCapture" type="load"/>
    </af:document>
  </f:view>
</jsp:root> However, I got the error following error when I run the page from IE8.
Assertion failed: Incorrect use of AdfRichUIPeer.GetDomNodeForCommentComponent.AdfRichCommandButton[oracle.adf.RichCommandButton] id=cbSaveSignatureButtonId StackTrace:function(x217)[AdfRichCommandButton[oracle.adf.RichCommandButtonId]..........
FYI, the following simple testing code has the similar error in IE8 too (not for Firefox).
<?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:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:resource type="javaScript" source="../resources/js/excanvas.js"/>
      <af:form id="f1">
        <f:verbatim>
          <canvas id="drawbox" width="600" height="200">
            <p>Your browser does not support &lt;canvas&gt;</p>
          </canvas>
        </f:verbatim>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>The error is: Assertion failed: Incorrect use of AdfRichUIPeer.GetDomNodeForCommentComponent.AdfRichDialog[oracle.adf.RichDialog] id:::msgDlg StackTrace function(x217).......
Your advice is very much appreciated.