Workaround for "onClientClick" in HTMLB-Tree

[Former Member]

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

[steffen_knoeller]

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

[Former Member]

Hello,

thanks for your hint.

As I have no submit-button I will try a solution which was sent to me by eMail by a coworker who had not the heart to post it here because it's a bit "dirty":

I could use the node-text field to specify HTML-coding also.

In my case I could give a <span>-tag with the onclick event as it is rendered for the button.

I tried this already with <b>text</b> to highlight the selected node and it works fine

Regards, Bernd

[Former Member]

oops, Brian had the heart to post the "dirty" solution already ... sorry ... first read -then write....

[Former Member]

To whom it may concern,

the onClick-Event in the nodeitem-text field does not work because the standard already uses the onClick. So, the onClick in the text-element would be the second one and this seems to be ignored.

Regards, Bernd

[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

[former_member181879]

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