Skip to Content
author's profile photo Former Member
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 a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Posted on 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 a comment
    10|10000 characters needed characters exceeded

  • Posted on 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 a 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

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.