CODEWITHSUNDEEP
symfonytwig
tirenweb
tirenweb

Reputation: 31709

How to pass twig variables to a js file included using <script src="...">

For a twig template file, I want to separate the js content from my HTML content, so I have created a .js file

with this content:

  {% if form.vars.data is not null %} 
  function downloadInvoice() {
    window.location = '{{ path('ziiweb_billing_bill', {'id': form.vars.data.id}) }}';
  }
  {% endif %}

  function updateTotals() {
      $('#service_download_pdf').css("pointer-events", "none");
      $('#service_download_pdf').attr("disabled", "true");

that Im adding using this line:

<script type="text/javascript" src="/bundles/ziiwebbilling/js/service_form.js"></script>

but get this error:

SyntaxError: expected expression, got '%' {% if form.vars.data is not null %}

Upvotes: 1

Views: 1257

Answers (1)

smarber
smarber

Reputation: 5074

You cannot put twig into your js files. However to pass twig variables to js files, you need to do have a script inside your twig file like this:

twig file

<script>
     //var data = {{ form.vars.data|default('') }};
     // I think it's better to pass the url directly
     {% if form.vars.data is not null %}
          var url = '{{ path('ziiweb_billing_bill', {'id': form.vars.data.id}) }}';
     {% endif %}
</script>

<script type="text/javascript" src="/bundles/ziiwebbilling/js/service_form.js"></script>

service_form.js

  if (typeof url === 'undefined') {
      // If the url exists
  }

Furthermore, there is a bundle that exposes routes https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

At the end, you should not define a js function if a test is valid, however you should check when running the function

Upvotes: 1

Related Questions