HtmlPanel get click

[itg-assistant]

Guenter Roessler asked 2016-11-23 20:32:33 UTC

Hi

how can I catch a button click from html/javascript inside a htmlpanel

[itg-assistant]

Luca answered 2016-11-23 20:42:42 UTC

See attached sample. Shows how to add javascript to any control and how to call back the server from the client.

It's very simple. Open the page in design mode, select the button and  in the property grid you will find two new properties (added when dropping the JavaScript extender from the toolbox) JavaScript and JavaScriptSource. They are the same, one allows you to edit the javascript in place, the other lets you select a js file.

The code in the same is like this:

this.addListener("click", function(){

   alert(\"Hello from JavaScript!\");
   App.MainPage.CallbackTheServer("Hello from JavaScript!");

});

You can find the list of events here: http://www.qooxdoo.org/current/apiviewer/#qx

And more help here: https://docs.wisej.com/docs/controls/extenders/javascript and here: https://docs.wisej.com/docs/concepts/javascript-object-model

Best,

Luca

[itg-assistant]

Guenter Roessler answered 2016-11-25 16:54:55 UTC

Hi Luca
ok that looks fine, but what I have to do, is a little bit different.

Please have a look on the demo project attached, to see what I tried:
I have plain html , which I show in the HtmlPanel. On a table element i have a click event, which calls a java script, that I put in Default.htm. This script is invoked, but my callback in this script to the server App.MainPage.PreviewEditAction not invoked

Chrome says

(index):12 Uncaught TypeError: Cannot read property 'PreviewEditAction' of undefined(…)

So how must the server callback look like?

[itg-assistant]

Luca answered 2016-11-25 17:17:41 UTC

The code is correct, but you don't have a MainPage. You have an instance of Window1 which is accessible as App.Window1.

In case your app creates multiple Window1 objects, then the App.member becomes an array.

See http://wisej.com/docs/html/JavaScriptObjectModel.htm

Best,

Luca

[itg-assistant]

Luca answered 2016-11-25 22:06:10 UTC

I forgot to add that if you need to register a global web method not related to a specific window or page, simply add a public static WebMethod to your Program.cs class. You will find it on the client side registered under App: i.e. App.YourMethod(…). To retrieve a particular window when running in t he static WebMethod use the Application.OpenForms or Application.OpenPages collections or the global list of controls at Application.FindComponent(Predicate match) that will find any component that matches the LINQ expression.