javascript needs different escaping on webDialogs

SDKs Web SDK
1

Ran into a weird problem with one of my webSDK plugin controls yesterday and I want to share the info in case others hit the same thing. I’m not sure if it’s a bug or just something I didn’t understand properly.

I was calling to executeJavascript to change the innerHTML of my plugin control. I altered the original working code by adding an “onload” handler to send a server event to me to let me know the image had loaded properly. The code originally looked like this:

“<img id=”"" + self.ControlID + “_img”” src=""" + currentLink + “”" style="“max-width:100%; max-height:100%; vertical-align:middle;”"/>”

which worked fine, and then I added the onload handler like this:

“<img id=”"" + self.ControlID + “_img”" onload=“”Xojo.triggerServerEvent(’” + self.ControlID + “’, ‘loaded’);”" src=""" + currentLink + “”" style="“max-width:100%; max-height:100%; vertical-align:middle;”"/>"

notice the single quote around the embedded triggerServerEvent call parameters and ignore the fact that the browser as tried to make some of them into fancy UTF8 quotes… This worked fine on a regular page, but blew up with a Unexpected identifier javascript error when the control was on a webDialog. I have no idea whats different about setting the innerHTML of something on a web dialog, but replacing those single quotes with ' allows the control to work on regular pages and on a web dialog.

the final snippet that is working everywhere now looks like this:

“<img id=”"" + self.ControlID + “_img”" onload="“Xojo.triggerServerEvent(’” + self.ControlID + “’, ‘loaded’);return false;”" src=""" +

Which is horribly messy and difficult to read, but such is life when you’re writing code that writes code that includes code :wink:

2

That’s why I usually use constants for code-in-code situations and replace predetermined placeholders (like $my_var$) with the content to be filled
As a side note, I’d suggest attaching the event listener in JS rather than in the img-tag itself

3

I usually use constants too, but this has evolved through a lot of iteration and experimentation to get the CSS and scripting right so it’s a mess right now. I’ll clean it up and make it pretty when I’ve got all the functionality worked out. That wouldn’t stop the necessity of the escaping of the ' though would it? I wouldn’t have to escape the double quotes for Xojo, but all the javascript stuff would still need to be the same.

Question about adding the handler in JS rather than in the tag though. Since I’m sending HTML anyway, doesn’t it make sense to do it there? If I add it in a separate executeJavascript call isn’t that more and potentially unnecessary xojo/server conversation as it appends that call to the next batch of javascript going up the pipe? And wouldn’t I potentially miss the first load event as the link is included so it might actually load before that javascript was executed and the handler inserted?

The advantage would be one layer of escaping quotes less, but other than that what would be the reason to do so?