CODEWITHSUNDEEP
javascripttwiginclude
Mbotet
Mbotet

Reputation: 180

How to make twig globals accessible in javascript library

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:

  1. test 1 => Undefined
  2. test 2=> {{ twig_variable }}
  3. twig_variable => SUCCESS

Upvotes: 0

Views: 402

Answers (2)

Mbotet
Mbotet

Reputation: 180

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

Upvotes: 1

DarkBee
DarkBee

Reputation: 15642

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);
});

Upvotes: 1

Related Questions