Skip to Content
avatar image
Former Member

Workaround for "onClientClick" in HTMLB-Tree

Hello,

as I learned in this forum you can force a JavaScript confirmation box in a button event like this:

<htmlb:button text = "Submit Form" onClick = "myClickHandler" onClientClick = "htmlbevent.cancelSubmit = !window.confirm('Submit?');" />

If the user cancels the action no HTMLB server event will be sent. If he confirms the HTMLB server event will be sent and you can react on it.

I would need this kind of functionality for the HTMLB Tree-Node-Click. Unfortunatly there's only the "OnClick" to trigger a server event but no "OnClientClick" event to display such a confirmation box as in the button example above.

Does anyone know a workaround for this?

Regards, Bernd

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Jul 20, 2004 at 09:06 PM

    Bernd,

    We will try to add the onClientClick in <htmlb:tree> in the next SP for you.

    The only idea I have at the moment, is that you render the nodes yourself. Use something such as a <htmlb:textView>. Wrap this inside a <span onclick="..."> sequence. For the actual onclick handling of the <span>, look at:

    <b>BSP In-Depth: Using the HTMLB Event System</b>

    /people/brian.mckellar/blog/2004/07/18/bsp-in-depth-using-the-htmlb-event-system

    You might also have to cancel the event bubbling. This was discussed previously here in the forum.

    ++bcm

    Add comment
    10|10000 characters needed characters exceeded

  • Jul 21, 2004 at 07:50 AM

    Hi all,

    You can use <htmlb:treeNode>-link as a workaround:

    <htmlb:inputField id      = "nodevalue"
                      value   = "<%=nodevalue %>"
                      visible = "FALSE" />        
    <htmlb:tree id          = "myTree1"
                title       = "test" >
      <htmlb:treeNode id     = "root" 
                      isOpen = "X" 
                      text   = "root">
        <htmlb:treeNode id   = "node"
                        link = "javascript:document.getElementById('nodevalue').value='node';document.getElementById('myclick').click();"
                        text = "Node"/>
      </htmlb:treeNode>
    </htmlb:tree>
    <htmlb:button id            = "myclick" 
                  text          = "Submit Form" 
                  onClick       = "myClickHandler" 
                  onClientClick = "htmlbevent.cancelSubmit = !window.confirm('Submit node '+document.getElementById('nodevalue').value+'?');" />
    

    Hope that helps!

    Best wishes,

    Steffen

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      To whom it may concern - Part II

      in contradiction to my former posting I can state today:

      onClientClick with Tree-Node does work.

      I tried different things, especially the bsp:htmlbEvent as described in Brian's weblog "BSP In-Depth: Using the HTMLB Event System".

      I became quite confused because the form was still submitted even when I used the "event.cancelBubble=true;". The HTML-form will be submitted but the event-manager won't find any data in the onInputProcessing/do_handle_event.

      Therefore you can state "event.returnValue=false;event.cancel=true;" to prevent the HTML-form send at all.

      With a normal button event as demonstrated in the weblog it works fine. But with a tree node you will run into JS-Problems which cant be avoided due to the fact that a html-href is used at the end....says Steffen K.

      So we use Steffen's solution posted above with some "add-on's":

      - the button is hidden with

      <span style="display:none">...</span>

      Thanks Steffen for that hint 😊

      - we use the tree-table an concatenate the link-element like this:

              CONCATENATE 'javascript:'
                          'document.getElementById('
                          ''''     " single ' in ABAP
                          'CONTENT_tree_order_gv_nodetabix'
                          ''''      " single ' in ABAP
                          ').value='
                          ''''      " single ' in ABAP
                          lv_click
                          ''''      " single ' in ABAP
                          ';'
                          'document.getElementById('
                          ''''      " single ' in ABAP
                          'CONTENT_tree_myclick'
                          ''''      " single ' in ABAP
                          ').click();'
                     INTO ls_treeitem-link.
      

      Watch our for the html-ID's in MVC mode: the IDs of the HTMLB-elements will be extended by the comp IDs and model ID.

      Then we had to adjust our do_handle_event because no tree-event is fired but a button-event. We defined a model-attribute gv_nodetabix which contains automatically the selected line of the tree table.

      Brian, Steffen, thanks for your help in online and off-line mode.

      Regards, Bernd