Update demo.

poc/erp5_gadget_interaction/SkinTemplateItem/portal_skins/erp5_gadget_interaction/adsafe.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>_text</string> </key>
+            <value> <unicode>\074!DOCTYPE html\076\n
+\074html\076\n
+\n
+\074head\076\n
+  \074script src="adsafe.js"\076\074/script\076\n
+  \074script src="jquery/core/jquery.js"\076\074/script\076\n
+  \074script src="jquery/plugin/renderjs/renderjs.js"\076\074/script\076\n
+  \074script src="interactor.js"\076\074/script\076\n
+\n
+\074/head\076\n
+\n
+\074body\076\n
+\n
+  \074h1\076test\074/h1\076\n
+\n
+  \074div id="content" gadget="test_gadgets/A"\076\074/div\076\n
+\n
+  \074script type="text/javascript" language="javascript"\076\n
+    //\074![CDATA[\n
+    // init all when DOM is ready\n
+    $(document).ready(function() {\n
+      RenderJs.bootstrap($("#content"));\n
+      // XXX: we use timeouts as we do not know if gadget structure is yet ready, how to do that in a generic way?\n
+      window.setTimeout(\'RenderJs.update($("#content"));\', DEFAULT_GADGET_DOM_READY_TIMEOUT);\n
+    });\n
+    //]]\076\n
+  \074/script\076\n
+\n
+  \074!-- Adsafe test --\076\n
+  \074div id="WIDGETNAME_"\076\n
+    Adsafe\n
+    \074script type="text/javascript" language="javascript"\076\n
+    ADSAFE.go("WIDGETNAME_", function (dom) {\n
+        "use strict";\n
+    eval("alert(\'1\');");\n
+    // This is where the code for the widget is placed. It can access\n
+    // the document through the dom parameter, allowing it indirect\n
+    // access to html elements, allowing it to change content, styling,\n
+    // and behavior.\n
+\n
+    });\n
+    \074/script\076\n
+  \074/div\076\n
+\n
+\074/body\076\n
+\074/html\076</unicode> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>adsafe</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>iso-8859-15</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

poc/erp5_gadget_interaction/SkinTemplateItem/portal_skins/erp5_gadget_interaction/interactions.xml

@@ -38,7 +38,6 @@
 \074html\076\n
 \n
 \074head\076\n
-\074!--   \074script src="adsafe.js"\076\074/script\076 --\076\n
   \074script src="jquery/core/jquery.js"\076\074/script\076\n
   \074script src="jquery/plugin/renderjs/renderjs.js"\076\074/script\076\n
   \074script src="interactor.js"\076\074/script\076\n
@@ -53,11 +52,11 @@
 \n
   \074script type="text/javascript" language="javascript"\076\n
     //\074![CDATA[\n
-    // init all when DOM is ready\n
     $(document).ready(function() {\n
       RenderJs.bootstrap($("#content"));\n
-      // XXX: we use timeouts as we do not know if gadget structure is yet ready, how to do that in a generic way?\n
-      window.setTimeout(\'RenderJs.update($("#content"));\', DEFAULT_GADGET_DOM_READY_TIMEOUT);\n
+      GadgetIndex.getRootGadget().getDom().one("ready", function (){\n
+          RenderJs.update($("#content"));\n
+      });\n
     });\n
     //]]\076\n
   \074/script\076\n

poc/erp5_gadget_interaction/SkinTemplateItem/portal_skins/erp5_gadget_interaction/test_gadgets/A.xml

@@ -37,6 +37,7 @@
             <value> <unicode>\074div gadget="" id="main-interactor"\076\n
   \074connect source="B.jsCall1" destination="C.jsCall1"\076\074/connect\076\n
   \074connect source="B.htmlEvent1" destination="C.htmlEvent1"\076\074/connect\076\n
+  \074connect source="B.htmlEvent1" destination="B.myOwnHtmlEvent1"\076\074/connect\076\n
   \074connect source="B.htmlEvent2" destination="C.htmlEvent2"\076\074/connect\076\n
   \074connect source="C.jsCall2" destination="B.jsCall2"\076\074/connect\076\n
 \074/div\076\n
@@ -47,26 +48,10 @@
 \074script type="text/javascript" language="javascript"\076\n
   //\074![CDATA[\n
     $(document).ready(function() {\n
-      window.setTimeout(\'InteractionGadget.bind($("#main-interactor"));\', DEFAULT_GADGET_DOM_READY_TIMEOUT); \n
+     window.setTimeout(\'InteractionGadget.bind($("#main-interactor"));\', 1000);\n
     });\n
   //]]\076\n
-\074/script\076\n
-\n
-\074!-- Adsafe test --\076\n
-\074!--\074div id="WIDGETNAME_"\076\n
-   Adsafe\n
-  \074script type="text/javascript" language="javascript"\076\n
-  ADSAFE.go("WIDGETNAME_", function (dom) {\n
-      "use strict";\n
-\n
-  // This is where the code for the widget is placed. It can access\n
-  // the document through the dom parameter, allowing it indirect\n
-  // access to html elements, allowing it to change content, styling,\n
-  // and behavior.\n
-\n
-  });\n
-  \074/script\076\n
-\074/div\076--\076</unicode> </value>
+\074/script\076</unicode> </value>
         </item>
         <item>
             <key> <string>content_type</string> </key>

poc/erp5_gadget_interaction/SkinTemplateItem/portal_skins/erp5_gadget_interaction/test_gadgets/B.xml

@@ -34,11 +34,12 @@
         </item>
         <item>
             <key> <string>_text</string> </key>
-            <value> <unicode>\074div\076\n
+            <value> <unicode>\074div style="border:1px solid red;"\076\n
   B (gadget)\n
   \074button onclick="GadgetIndex.getGadgetById(\'B\').jsCall1()"\076B.jsCall1 -\076 C.jsCall1\074/button\076\n
   \074button onclick="$(\'#B\').trigger(\'htmlEvent1\')"\076HTML event 1\074/button\076\n
   \074button onclick="$(\'#B\').trigger(\'htmlEvent2\')"\076HTML event 2\074/button\076\n
+  \074p id="hide" style="display:none;"\076 hidden text on myownHTMlEvent1\074/p\076\n
 \074/div\076\n
 \n
 \074script type="text/javascript" language="javascript"\076\n
@@ -47,6 +48,10 @@
         gadget = GadgetIndex.getGadgetById("B");\n
         gadget.jsCall1 = function (){alert("B.jscall1");};\n
         gadget.jsCall2 = function (){alert("B.jscall2");};\n
+        gadget.myOwnHtmlEvent1 = function (){\n
+          $("#hide").toggle();\n
+          alert("B.myOwnHtmlEvent1");\n
+        };\n
     });\n
   //]]\076\n
 \074/script\076</unicode> </value>

poc/erp5_gadget_interaction/SkinTemplateItem/portal_skins/erp5_gadget_interaction/test_gadgets/C.xml

@@ -34,7 +34,7 @@
         </item>
         <item>
             <key> <string>_text</string> </key>
-            <value> <unicode>\074div\076\n
+            <value> <unicode>\074div style="border:1px solid yellow;"\076\n
   C (gadget)\n
   \074button onclick="GadgetIndex.getGadgetById(\'C\').jsCall2();"\076C.jsCall2 -\076 B.jsCall2\074/button\076\n
 \074/div\076\n

poc/erp5_gadget_interaction/bt/revision

-1
\ No newline at end of file
+2
\ No newline at end of file