Simulation of button push via JavaScript in HTMLB pages

[Former Member]

Can anyone shed some light on simulatinh button clicks via JavaScript in HTMLB pages?

In "old-style" HTML BSP pages, you could execute the following:

document.form[0].elements["onInputProcessing(find)"].click()

to simulate clicking a "find" button; the oninputprocessing event handler would then execute. In HTMLB pages, the above JavaScript generates an error, as the object does not exist. Looking at the rendered page code, the HTMLB button with the "id = find" tag data is rendered as a JavaScript event.

As a quick & dirty shortcut, I defined an "type=submit" button and hid it with a <div> tag. Now I can access the hidden button via JavaScript as before, and the oninputprocessing BSP event handler fires, but the event ID for the hidden button is not set.

Can anyone tell me what I'm missing here?

Many thanks,

D.

[former_member181879]

Hallo Dorian,

What was that old saying about "one picture is worth a thousand words"? Let us see:

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<htmlb:content design="design2003">
 <htmlb:page>
  <htmlb:form>
   <htmlb:button id            = "btn1"    
                 text          = "Press Me"
                 onClientClick = "alert('off we go!');"
                 onClick       = "myClickHandler" />
   <script>
       document.all.btn1.click();
   </script>
  </htmlb:form>
 </htmlb:page>
</htmlb:content>

Does this do what you want? Be careful, I am no JavaScript expert, and suspect that the above might not work in Netscape. You will have to test.

Also the ".click()" sequence is very much dependant on the HTML that is rendered for the button. Should this ever change in feature, of course you might have to recode that part.

Why the hidden <div> with <input type=submit> does not work as expected? The reason is that all events of the HTMLB libraries are put into one central JavaScript function HtmlbSubmitLib. This function sets a number of hidden input fields that are required for the event handling, before the form is submitted.

You could of course consider to trigger this function yourself. This function HtmlbSubmitLib's interface will not change anymore. However, the only way that we support on the server to build strings to call this, is if you have already an BSP-element available. So maybe this trick with the button above is easier.

b.

[Former Member]

Hi Brian,

Wellcome back!!!! Nice to see you in action after a long time(from Christmas).

Could you tell me where I can find the HTMLB events lists that can be used in Javascripts of BSPs. Let's say I have started java Script window "Confirm", If 'YES' I want to submit the form else not to submit. I found one called HTMLBSUBMIT , I want to know where these commands are documented.

Regards,

Suresh

[former_member181879]

Hallo Suresh,

Yes, it has been a long time. Got caught up in some time warp thing.

As for those JavaScript functions, they are not released and as such they are not documented. Ok, that is the theory. In practice, we know of other groups that intercept these Javascript functions (same name + signature) to do their "thing" on each round trip. As such, we will not change these functions any more.

What we did allow and support, was for other tag writers to use out event infrastructure to get their events back to the server. See CL_HTMLB_MANAGER=>RENDER_EVENT. This way, in the past it has enabled us to improve a few times on this JavaScript functions (we render better/faster stuff), without invalidating other code. So in principle, our recommendation would be to use the =>RENDER_EVENT call. Which has the one negative aspect, it requires a tag as part of its interface.

If you are interested in reading this Javascript code, look in class CL_HTTP_EXT_BSP_HTMLB.

Let us look at your real problem. From my understanding you want to cancel an event. For this, there is the htmlbevent object injected into the client side code. On this object there are two interesting attributes cancelSubmit and returnValue. The cancelSubmit influences whether the form is submitted or not. The other is the return value to the real onclick event in DOM. This is usually false to cancel further event processing.

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

The interesting part is the way that the cancelSubmit is set. For confirm(), see MSFT/IE documentation.

++bcm

[former_member181879]

While we are at it, there is often a similar question/problem. How can one do something for each form submit.

What we did with the HTMLB library is that we render out a pre and post methods just before the form is submitted. These functions can be "intercepted" and enhanced with additional logic.

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content>
 <htmlb:page>
  <script>
    var origPre  = htmlbSubmitPre;
    var origPost = htmlbSubmitPost;
  </script>
  <script>
    function htmlbSubmitPre()
    {
      window.status =  'Posting...';
      origPre();
    }
    function htmlbSubmitPost()
    {
      window.status += 'Waiting Answer';
      origPost();
    }
  </script>
  <htmlb:form>
   <htmlb:button
     text          = "Submit Form"
     onClick       = "myClickHandler"  />
  </htmlb:form>
 </htmlb:page>
</htmlb:content>
<% WAIT UP TO 2 SECONDS. %>

The important part of this example code is that there <b>must</b> be two script blocks. In the first block we hook references to the original functions. In the second block the functions are overwritten, and supplied with their functionality. As a last step, we still call the original functions.

++bcm

[Former Member]

Brian:

Thanks very much - just what I needed.

Once I read your response, and looked a bit closer at my code, I realized that in HTMLB the button ID is simply a name, and I was trying to call a button with the ID "onInputProcessing(name)" - which of course wasn't a valid object!

Anyway, thanks for putting me right .....

Regards,

D.

[Former Member]

Hello Brian,

could you explain these tow functions a bit more? What can is their original purpose and what can they be used for?

Regards

ALEX

[former_member181879]

> could you explain these two functions a bit more?

What two functions are you refering to? If specifically the pre and post submit functions, then the explaination is complex. Let me give a summary.

There is some development group in house that did not want all form fields to be transmitted to the server each time. So just before the form is submitted, they changed many inputfields to disabled, so that these formfields are not send to the server. After the submit, they turned the fields back. For this, they wanted to intercept the form submit, so as to add their additional logic.

++bcm

[Former Member]

Hi Brian,

Thanks for the great information..I am glad you are back and am getting all my questions resolved so quickly. I can count on you anytime for resolutions to all BSP problems. Will come to you for more information soon....

thanks again.

Suresh

[Former Member]

yes, I meant these two functions. sorry for not being clear enough.

ALEX