Search code examples
javascriptjquerysymfonytwigassetic

import js in html.twig symfony2

I try to import the JS file into my html.twig file. But it doesn't work. Could you give me some suggestions?

this is my layout file

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
{%block stylesheets %}

  <link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/bootstrap.css') }}" type="text/css" media="all" />
  <link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/layout.css') }}" type="text/css" media="all" />

  <link href="asset('bundles/ensjobologic/css/bootstrap-responsive.css" rel="stylesheet">

  <link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/flat-ui.css') }}" type="text/css" media="all" />

  {% endblock %}
  {% block javascripts %}
  {% endblock %}
</head>

this is the child file:

{% block javascripts %}
    {{ parent() }}
    {% javascripts 'js/jquery.tagsinput.js' %}
      <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

the css work well. But the js file don't have any effect.

Solution

  • asset() is not assetic. You don't have to speficy the asset in the javascripts macro. See how to use assetic and inlcude javascripts

    {% block javascripts %} 
    {{ parent() }}  
    {% javascripts '@EnsUserBundle/Resources/public/js/jquery.tagsinput.js'%}
         <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

    Take notice at the asset_url variable.

    EDIT: For dev the assets are delivered by a controller (in default settings), so every change is detected. Only after adding new files a cache clear is needed.

    for prod you need to dump them to a physically file under the web path with

    php app/console assetic:dump --env=prod --no-debug