How to make twig globals accessible in javascript library
Question
I am refactorizing one twig template, this included a HUGE amount of javascript functions which should be organized into a separate library to keep the structure away from the logic. So i moved them and linked the library like :
<script type="text/javascript" src="../global/jscripts/jslibrarytest.js"></script>
The problem here is that some of these libraries were using twig globals. Most of the functions work properly, but some others don't.
I've tried passing it through html code and recieving it through jquery (test1) which I couldnt make it work. Then im trying to access it directly.
My template includes something like this:
<div id="twig-vars" data-test="{{ twig_variable }}"></div>
<script>
$(".boton-excel").click(function() {
$("#target_data").val(fooFunction);
alert({{ twig_variable }});
});
</script>
external javascript
function fooFunction(){
var test1= $('#twig-vars').data('test');//
var test2= "{{ twig_variable }}";
var test3= {{ twig_variable }};//syntax error
alert(test1);
alert(test2);
}
The output in the alerts was:
- test 1 => Undefined
- test 2=> {{ twig_variable }}
- twig_variable => SUCCESS
2 answers
solution1
1 ACCPTED 2019-01-24 08:23:44
I used a bad example above. I was using in my html something more like
<div id="twig-vars" data-newRoute="{{ URL_Symfony_dev }}"></div>
And so the js was :
var test= $('#twig-vars').data('newRoute');
alert(test);
Which didn't work. But the problem (camel case in names) couldn't be detected with the example i gave. My apologies I noticed it after some rewording with data-test worked so i ended up with this in the html.
<div id="twig-vars" data-newroute="{{ URL_Symfony_dev }}"></div>
And in my JS:
var test= $('#twig-vars').data('newroute');
alert(test);
And THAT WORKS. I am new to this place and i dont know if i should edit the original question. Any help for it also appreciated.
EDIT: Using class(.) instead of id(#) will only capture the first html even if the attribute name is different. This means:
<div **class**="twig-vars" data-**test1**="{{ URL_Symfony_dev }}"></div>
<div **class**="twig-vars" data-**test2**="{{ URL_Symfony_dev }}"></div>
<div **class**="twig-vars" data-**test3**="{{ URL_Symfony_dev }}"></div>
var test1= $('.twig-vars').data('test1');
var test2= $('.twig-vars').data('test2');
var test3= $('.twig-vars').data('test3');
alert(test1);//output-> correct result
alert(test2);//output-> undefined
alert(test3);//output-> undefined
solution2
1 2019-01-24 08:47:13
You don't need to add extra html to pass your variables to twig as seen here
twig file
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var my_route = {% if URL_Symfony_dev is defined %}'{{ URL_Symfony_dev }}'{% else %}null{% endif %}
</script>
<script src="scripts/functions.js"></script>
</body>
</html>
functions.js
$(function() {
alert('The route is '+my_route);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.