Wie bekomme ich einen Wert mit CSJS auf xPage?

Question

Ich kann mit SSJS in onItemClick Ereignisse Popup-Menüpunkt angeklickt erhalten:

context.getSubmittedValue() 

Aber wie ich Artikel unter Verwendung CSJS in gleichem onItemClick Ereignisse geklickt bekommen?
Dies scheint nicht hilfreich zu sein:

thisEvent.target.id 

und dieses nicht alles zurück:

thisEvent.target.innerHTML 

Hier ist meine Xpage:

<xe:popupMenu id="popupMenu1"> 
    <xe:this.treeNodes> 
     <xe:basicLeafNode label="menu item 1" submitValue="mi1"></xe:basicLeafNode> 
     <xe:basicLeafNode label="menu item 2" submitValue="mi2"></xe:basicLeafNode> 
    </xe:this.treeNodes> 
    <xp:eventHandler event="onItemClick" submit="true" 
     refreshMode="complete"> 
     <xe:this.action><![CDATA[#{javascript:print(context.getSubmittedValue());}]]></xe:this.action> 
     <xe:this.script><![CDATA[alert(thisEvent.target.innerHTML);]]></xe:this.script> 
    </xp:eventHandler> 
</xe:popupMenu> 

Ich brauche keine inf o das würde mir helfen, zu identifizieren, welcher Artikel in CSJS geklickt wurde

Answer 1

Sie können das onClick-Ereignis jedes basicLeafNode verwenden, um festzustellen, was in CSJS angeklickt wurde.

Hier ist ein Beispiel für die Verwendung des onClick-Ereignisses von basicLeafNode.

Wenn Sie SSJS-Code ausführen müssen, können Sie das click-Ereignis auf einer ausgeblendeten Schaltfläche mit einem Ereignishandler auslösen, der Ihren SSJS-Code ausführt.

Beachten Sie, dass, wenn Sie OnClick-Ereignis zu einem basicLeafNode es überschreibt die onItemClick Ereignis hinzufügen: Cannot get XPages toolbar onItemClick event to execute when basicLeafNode contains onClick event

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"> 
    <xp:button value="Label" id="button1"> 
     <xp:eventHandler event="onclick" submit="false"> 
      <xp:this.script><![CDATA[ 
      XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()}); 
      ]]></xp:this.script> 
     </xp:eventHandler> 
    </xp:button> 
    <xe:popupMenu id="popupMenu1"> 
     <xe:this.treeNodes> 
      <xe:basicLeafNode label="menu item 1" submitValue="mi1"> 
       <xe:this.onClick><![CDATA[document.getElementById("#{id:mi1Event}").click();]]></xe:this.onClick> 
      </xe:basicLeafNode> 
      <xe:basicLeafNode label="menu item 2" submitValue="mi2"> 
       <xe:this.onClick><![CDATA[document.getElementById("#{id:mi2Event}").click();]]></xe:this.onClick> 
      </xe:basicLeafNode> 
     </xe:this.treeNodes> 

     <xp:eventHandler event="onItemClick" submit="true" refreshMode="complete"> 
      <xe:this.action> 
       <![CDATA[#{javascript: 
       print("onItemClick event running"); // Will not run! 
      }]]></xe:this.action> 
     </xp:eventHandler> 
    </xe:popupMenu> 


    <xp:button value="_mi1" id="mi1Event" style="display:none;"> 
     <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" onComplete="console.log('onComplete of mi1 running');" refreshId="popupMenu1"> 
      <xp:this.action><![CDATA[#{javascript:print("ssjs code for mi1 running");}]]></xp:this.action> 
     </xp:eventHandler> 
    </xp:button> 

    <xp:button value="_mi2" id="mi2Event" style="display:none;"> 
     <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" onComplete="alert('onComplete of mi2 running');" refreshId="popupMenu1"> 
      <xp:this.action><![CDATA[#{javascript:print("ssjs code for mi2 running");}]]></xp:this.action> 
     </xp:eventHandler> 
    </xp:button> 

</xp:view> 

Answer 2

Wie Sie schrieb in Ihrem Kommentar, möchten Sie SSJS Code zuerst und erst später CSJS Code auszuführen. Unglücklicherweise führt eventHandler CSJS immer zuerst aus.

Verwenden Sie view.postScript() im SSJS-Code, um Code auf der Clientseite auszuführen, nachdem der Code auf dem Server ausgeführt wurde. Ihre Eventhandler würde wie folgt aussehen:

<xp:eventHandler 
     event="onItemClick" 
     submit="true" 
     refreshMode="complete"> 
     <xe:this.action><![CDATA[#{javascript: 
      var value = context.getSubmittedValue(); 
      print(value); 
      view.postScript('alert("' + value + '");'); 
      }]]></xe:this.action> 
    </xp:eventHandler> 

Sie können auf diese Weise eine Funktion auf Client-Seite aufrufen und den ausgewählten Wert als Parameter verwenden:
view.postScript('yourClientSideFunction("' + value + '");');