Access Java Scrip Extension Variables through Velocity

Help / Discuss
, ,
1

I made a simple javascript extension:

var String;
alert(String);

Now, in my Page where i use this script i have the following Velocity command

{{velocity}}
#set($String = "Hello World")
$xwiki.jsx.use('TEST')
{{/velocity}}

I want the string that is created in the page to be used in the javascript, so i can use the same script multiple times with a small change of the string.

f.e.

{{velocity}}
#set($String = "Hello World")
$xwiki.jsx.use('TEST')
{{/velocity}}

and later

{{velocity}}
#set($String = "Hello World  2")
$xwiki.jsx.use('TEST')
{{/velocity}}

any Ideas?

2

Afaik there is no way to do it directly like in your example, since velocity is run when rendering the page, and javascript is client-side.
Two solutions I can think of:

  • Either making a velocity macro which inserts a <script>alert($String)</script> somewhere in the page, although you’ll have to be careful with escaping;
  • Somehow add the variable in the html from velocity and recover it from javascript. This might be more modular, since you have JS and velocity separate, but you’ll have to remember to insert the right element. Again, you should be careful with escapes. Example:
{{velocity}}
#set ($String = "Hello!")
## Use the html macro to insert the html, and not render it as plain text:
{{html}}
<span id="my-velocity-script-variable-storage" data-string-variable="$escapetool.html($String)" style="display:none;"></span>
{{/html}}
{{/velocity}}
<script>
// Your js script, in another file:
var String = document.getElementById("my-velocity-script-variable-storage").getAttribute("data-string-variable");
alert(String);
</script>
3

Maybe https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/#HHowtocommunicatedatatoJSXorSSX3F would help?

1 Like
4

Thank you, that helps a lot.
I didn’t see that part in the documentation.
I just can’t figure out how to use the $request.(Parameter name) in javascript.

because

alert($request.MyParameter);

Obviously won’t work in Javascript syntax.

5

I guess you could use url - How can I get query string values in JavaScript? - Stack Overflow

Or you can configure your SSX or JSX xobject so that “parse content” is true, see https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/#HHowtouseVelocityinparsedcontent

6

Thank you, that helps a lot.
I actually forgot to enable the parse content setting.

Now it works for one alert.

But if I try to add a different alert, it doesn’t seem to work anymore.

I currently have the following code.

{{velocity}}
$xwiki.jsx.use('TEST.WebHome', {'minify' : false, 'language': $context.language, 'xxx': 'xxx'})
{{html}}
button id="btn">xxx</button
{{/html}}

{{/velocity}}

{{velocity}}
$xwiki.jsx.use('TEST.WebHome', {'minify' : false, 'language': $context.language, 'xxx': 'yyy'})
{{html}}
button id="btn">yyy</button
{{/html}}

{{/velocity}}

No matter which one of the buttons I press, it always returns yyy.
This is because xwiki reads the code before the button is pressed.

Is there a way to only execute the volocity code, when the HTML button is pressed

like

{{html}}
button id="btn">yyy</button
{{velocity}}
$xwiki.jsx.use('TEST.WebHome', {'minify' : false, 'language': $context.language, 'xxx': 'yyy'})
{{/velocity}}

{{/html}}

i know this does not work that way, but its just to show the basic idea.

Or maybe it’s possible to set a value with the button?