Call a javascript function from a inline SVG

Hello together,

is it possible to call a javascript script within an inline SVG?

The SVG code would looke like something like this:

"<svg height=""100"" width=""350"" fill=""yellow""> <circle cx=""50"" cy=""50"" r=""30"" stroke=""red"" stroke-width=""25"" fill=""white"" onclick=""alert('You have clicked the circle.')""/> 

Instead of an alert I would like to call a predefined script.


Best regards

mvp_badge
MVP
Solution

Hi Dimitri,

I think I saw your comment come by in the other post about a similar situation. I gave an answer there you might want to try.

Basically:

You can create an OnReady event on your page. Add a Javascript block and define a function that you call with your onclick event. And in that function add the action you want to create pre-pended with "$action."


function MyClickFunction(){
    $action.MyActionHere();
}


Kind regards,
Eric

mvp_badge
MVP
Solution

Hi Dimitri,


I just did a PoC and put it working. I noticed the approach I had suggested wouldn't work, so below the steps I did:


1. Check the HTML element you want to have it clickable. You want to have the circle inside the svg element clickable: 


2. The only thing you need to add now is to identify the element by its selector ("svg circle") and add a click listener when the page loads to that element.


Notice that when the element will be clicked, I will trigger the client action Handler_OnSVGClick which just has a message.

I attach my working OML so you can check it working and take any doubts you might have.


Kind Regards,
João

ReactiveSandbox6.oml

mvp_badge
MVP

Hi Dimitri,


Probably simpler, I would wrap the SVG in a container and use the onclick event to trigger a client action.


Needless to say that on that client action, you can run the logic you need, including a JavaScript node:


Kind Regards,
João

Thank you for your answer João,

Using a div with a link will end up in a clickable rectangle. But I would like to have a indiviudal clickable shape.

Best regards
Dimitri

mvp_badge
MVP

Ok, I see your point.


What I would try then would be to fill in a class in the ExtendedClass attribute, and with JavaScript on the OnReady screen event, find that element by the given class and add a listener to it.


Kind Regards,
João

mvp_badge
MVP
Solution

Hi Dimitri,

I think I saw your comment come by in the other post about a similar situation. I gave an answer there you might want to try.

Basically:

You can create an OnReady event on your page. Add a Javascript block and define a function that you call with your onclick event. And in that function add the action you want to create pre-pended with "$action."


function MyClickFunction(){
    $action.MyActionHere();
}


Kind regards,
Eric

Thank you for your both questions. But I still can't find a solution in the forum. Sorry for bothering you!

My inline SVG looks now like:

The Javascript block in the OnReady Event looks like this:

But where can I put now a connection between the MyClickFunction() and Class1?

Thank you for your effort!


Best regards

Dimitri

mvp_badge
MVP
Solution

Hi Dimitri,


I just did a PoC and put it working. I noticed the approach I had suggested wouldn't work, so below the steps I did:


1. Check the HTML element you want to have it clickable. You want to have the circle inside the svg element clickable: 


2. The only thing you need to add now is to identify the element by its selector ("svg circle") and add a click listener when the page loads to that element.


Notice that when the element will be clicked, I will trigger the client action Handler_OnSVGClick which just has a message.

I attach my working OML so you can check it working and take any doubts you might have.


Kind Regards,
João

ReactiveSandbox6.oml

mvp_badge
MVP

You add the onclick="MyClickFunction()" in the circle tag. 

Kind regards, 

Eric

(Edit. Most certainly check out João's solution as he tends to be a smarter man then I am)

Thank you both for your effort! Your short app, João, works completely perfect!


Best regards

Dimitri

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.