Greetings,
How do we go about using the variables defined within a template in JavaScript?
Let’s say I have the following line: jQuery("input[name='completion_redirect']").attr( "value", "*{Get name=myVariableComesHere}*" );
How would I go ahead implementing something like this?
I didn’t find any documentation to support JavaScript.
Hi Kendell,
Sorry for the late reply! There’s a feature called JS Variables, which can pass values from a template to its script. It’s documented here: Get and Set | Tangible Loops & Logic
You can pass a string/text value, like this:
<Set js=variable_name>Hello</Set>
Or other value type like number:
<Set js=variable_name type=number>123</Set>
And access it from the Script section:
console.log( variable_name )
The above will output the value in the developer’s console.
Hi,
I’m trying to use a JS script in a L&L template, beginning with the simple variable mentioned above but it doesn’t work:
My template:
<Set js=my_var>TEST</Set>
<script>
(function($) {
$(window).on('load', function() {
$.imageMapProHighlightShape('NZ Map Single Project', my_var);
console.log(my_var);
});
})(jQuery);
</script>
I get this error in frontend:
Uncaught ReferenceError: my_var is not defined
My next step would be to loop through Taxonomy Terms and run a JS function for each.
I tried the following without success:
<script>
(function($) {
$(window).on('load', function() {
<Loop Taxonomy=my_tax>
$.imageMapProHighlightShape('My Map', '{Field title}');
</Loop>
});
})(jQuery);
</script>
I think the script has to go in the script tab for it to pass the variable properly. That has worked for me.
Thank you for the tip @thepauly, i might give it a try.
Anticipating the next step of my project (see above, loop through Taxonomy Terms and run a JS function for each), i guessed it would be more difficult to handle with L&L than PHP code directly, so i made this that works fine:
$terms = get_the_terms( get_the_ID(), 'my_tax' );
$output = '<script type="text/javascript">
(function($) {
$(window).on("load", function() {';
foreach ( $terms as $term ) :
$output .= 'console.log("' . $term->name . '");
$.imageMapProHighlightShape("My Map", "' . $term->name . '");
endforeach;
$output .= '});
})(jQuery);
</script>';
echo $output;
I’m still curious to know if the same is doable with L&L and how.