How to use Javascript

Need to include a very simple javascript code to a wrapper. I was following “Creating Custom Web Controls” (from Extras), and plain HTML worked perfectly.

However, when I tried the simplest HTML + JavaScript - only the html worked.

[b]

Click Date to display current day, date, and time.


Date

Date will be displayed here

[/b]

How would I make this work? What are the changes required on this simple script and in Xojo to make this work.

Where did you put this code in the control?

I have created a “String” constant called MyHTML. Above bold text is the value of that string.

On a WebControlWrapper I have String HTML, property (as suggested in “Creating Custom Web Controls”, and that HTML String is now Me.HTML = MyHTML ((in example it is

Hello world

)

I get the text, and the button, but the javascript “onclick” is not functioning (this is the screen: http://prntscr.com/4n1j0e)

In SetupHTML I have: Return “<div id=”"" + self.ControlID + “”">" + HTML + “”
Int SetupCSS I have Styles(0).Value(“visibility”) = “visible”

In that case, the problem is that you’re not calling the function from anywhere. It’s probably getting written to the page, just not run.

can you please give me example hot to use simple function (or refer me to appropriate help)

I think you’re pretty close. You could probably make a method in your Xojo control with code that looks like this:

ExecuteJavascript("document.getElementById('" + Self.ControlID + "').innerHTML = Date();")

If you just want to call the function you’ve defined use code like this:

ExecuteJavascript("myFunction()")

Keep in mind though that this is not going to be very compatible if you are using other developers WebSDK controls. In that case you should really be using a namespace for your functions, otherwise you may end up conflicting with another developer one of you may overwrite the others code.

Got the “ExecuteJavascript(“document.getElementById(’” + Self.ControlID + “’).innerHTML = Date();”)’” That works, but I still cant understand where can I call ExecuteJavascript(“myFunction()”)
I tried to do something like that in Shown Event. I used ExecuteJavascript(“myFunction()”) but I get information:
Could not execute returned javascript: myFunction is not defined
Source: myFunction()

Even that it is defined in the controls HTML String.

Are you able to run your function in the JavaScript debugger on the browser itself? If not, it would probably be helpful to look at the DOM inspector in the browser itself (all of the modern browsers have one in their developer tools) and see what was actually rendered for your node.

The function runs in browser. Just don’t really know how to make it work in xojo. I am probably mistaking the location. The function is in my HTML variable. Perhaps it should be located somewhere else?

It probably just means that you’re calling it too early. Have you tried that ExecuteJavascript call from the Action event of a button?

Yes, I got the same result. What is most interesting - everything works when I put the same XTML (with Javascript functions in it,) on HTMLViewer. But then I do not know how to interact with Xojo (for example get a string from the page, and copy it’s value to a String variable in Xojo.

Yes, I got the same result. What is most interesting - everything works when I put the same HTML (with Javascript functions in it,) on HTMLViewer. But then I do not know how to interact with Xojo (for example get a string from the page, and copy it’s value to a String variable in Xojo. (ignore previous, XTML was typing error)

Change the Hashtag in JavaScript, and use the App.HashtagChanged event in Xojo.

Solved almost everything but how to return value to Xojo.
this is my SAVE function (as part of sScript to be joined)
'Save
[i] sScript.Append “function save() { var s = “””";"
sScript.Append “for (i = 0; i<coords.length; i++) {”
sScript.Append “s = s + coords[i].px + “” “”;”
sScript.Append "s = s + coords.py + “” “”;"
sScript.Append “alert (s);”
sScript.Append “Xojo.triggerServerEvent(’” + Self.ControlID + “’,‘Clicked’, s);”
sScript.Append " }"

I DO SEE the Alert (bold in code above, meaning that everything works, but the Xojo.Trigger… )
If I use my Save function I get the alert from Javascript with the “s” value. I have defined event “Clicked” and I have put “ExecuteEvent” procedure (code does not go there at all)

“s” needs to be an array, like this: [s]

In the triggerServerEvent method.

sScript.Append "function save() { var s = """";" sScript.Append "for (i = 0; i<coords.length; i++) {" sScript.Append "s = s + coords[i].px + "" "";" sScript.Append "s = s + coords[i].py + "" "";" sScript.Append "alert (s);" sScript.Append "Xojo.triggerServerEvent('" + Self.ControlID + "','Clicked', [s]);" sScript.Append " }"

The code you posted is also missing a }

Oooo… Thanks Greg. it wokrs, finally :slight_smile: