Calling Servoy method from HTML

Is there a way to call a Servoy method from HTML and pass some variable data?

So far, I have only been able to call methods with literals for arguments like: javascript:globals.xyz(1).
I would like to do something like this: javascript:globals.xyz3(document.getElementById(‘myElement’).value) but Servoy doesn’t recognize that.

Any workarounds for this?

I don’t think Servoy’s HTML_AREA has any concept of the DOM that you are trying to access using:

document.getElementById('myElement').value

This is why your call fails.

For such calls between a HTML page and Servoy, you should try the BrowserSuite ;)

Hi Patrick, I know how to do it with the BrowserSuite, unfortunately, I’m talking about the webclient here.
So the webclient should be aware of the DOM but I guess it never gets a change, I think Servoy tries to translate the whole onclick event code into a method call.

Hum, yes, or maybe the element id is not the one you think…
Have you tried to search the source of the page for that element?

Yes I did.

It translates in:

onclick="if (testDoubleClickId('sv_FBCC397E_27C9_43E8_AD1B_E1BB5AFD431E')) { wicketAjaxGet('?x=7y0eZuVZ-3jB5qePf2NOXXAlQbu2hOUZXwecouqy0HPA4t-XwftRT9Ocgiq3*KDV&scriptname=globals.xyz3(document.getElementById(\'selected\').value)');} return false;"

That’s why I think Servoy parsed the whole string beforehand. It is passed back by the wicketAjaxGet for Servoy to evaluate while I wanted the client to evaluate part of it. Seems to be all or nothing. If I change the globals.xyz3() for alert() it displays exactly what I want to pass to Servoy so I am dealing with the proper id as long as Servoy would leave it be.

Actually, you should have a look at the WebClientUtils, that could help invoking client side javascript and/or evaluating it on the client before calling back Servoy.

We opened a project for Sean Devlin from Servoy on ServoyForge, as soon as he will have filled the repository and files section we will set the project as public and you will have access to this, I think it could solve your problem.

Hi Jeroen,

This is currently not possible, the only way to do this is client-side (so in the browser) retrieving the string value of the onclick handler and start parsing away yourself, replacing the arguments for the method you’re calling. quite cumbersome.

Please file a feature request to see if we can make this easier.

Paul

I implemented Paul’s suggestion. True, it’s not pretty but it works.

First, I gave the element containing the callback an id in order to be able to script against it like:

<a id="standout" onclick="javascript:globals.callback()">...</a>

Second, I added this function to the of my html:

function changeCallbackArgs(callBackId, args) {
 var o = document.getElementById(callBackId);
 o.outerHTML = o.outerHTML.replace(/(.*)globals\.callback\(.*\)(.*)/,"$1globals.callback(\\'" + args + "\\')$2");
}

Third, I added a call to the changeCallbackArgs function to the onclick of the html element I want to dynamically set the callback parameters like:

<a onclick="changeCallbackArgs('standout,'myDynamicValue')">...</a>

The main drawback in this sollution is that I need to create a changeCallbackArgs function for each callback function because the name of the callbackfunction is part of the literal regExp. I tried to create a more generic function like this:

function changeCallbackArgs(callBackId, callBackMethod, args) {
var o = document.getElementById(callBackId);
var pattern = "(.*)globals\."+callBackMethod+"\(.*\)(.*)";
var re = new RegExp(pattern);

o.outerHTML = o.outerHTML.replace(re,"$1globals."+callBackMethod+"(\\'" + args + "\\')$2");
}

The problem seems to be that the (.*) does not match anything in this construction so the 2nd group matches the rest of the string. It’s the same pattern but somehow, creating a regExp object first does not match the same strings as in the first example.

Any regExp javascript guru’s out there ?

Jeroen,
This looks similar to something I am trying to do.

I am struggling to see where you call your method in servoy?

So i have a variable in a javascript function, which has been activated by submitting and html form

<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
    var TestVar = form.elm1.value;
	//javascript:globals.testTinyMCECallback(TestVar)?????
}
</SCRIPT>

How do i translate that to a line like my commented out one, to send the TesVar back into a global method or method in servoy?

Thanks

In my sample, the place where your Servoy method is called is:

<a id="standout" onclick="javascript:globals.callback()">...</a>

So callback would be your Servoy method. I specifically don’t supply any parameters here.
Servoy will translate this call into a wicket call that will supply the arguments to your Servoy method.

My changeCallbackArgs function (which resides in the client HTML) will go into the client HTML and alter the wicket call to stuff the dynamic parameters into it.
Finally, what will call your Servoy method is a client call to the onclick event of the either by a user actually clicking on it (if it is visible) or you calling it from your client-side javascript code.

Has anything been done yet to make this easier?

Here’s my need:
– I want to call a Servoy method from client-side JavaScript based on a non-Servoy, Java-applet-generated event.
– I’d like to pass binary data and not just strings or other primitives.

As far as I can tell, Sean’s web client utils allow a call from server to client, and then a callback with a result. That works great. However, as noted above, my event is initiated from the server side, but rather purely from the client-side.

I can call a Servoy method with no parameters, but trying to duplicate Jeroen’s technique is fighting me.

In Servoy 6 you can use browser:clientSideVar to pass a clientside parameter value to your Servoy method. See:

http://wiki.servoy.com/display/beta/New+in+this+release#Newinthisrelease-WebClientspecific