2

When I am extending my base.html.twig my JS are loading twice. Here is my code:

{% block javascripts %}
{% javascripts
'@MyBundle/Resources/public/app/src/lib/jquery.js'
'@MyBundle/Resources/public/app/src/lib/jquery-ui.js'
'@MyBundle/Resources/public/app/src/lib/angular.js'
'@MyBundle/Resources/public/app/src/lib/ui-bootstrap-tpls-0.10.0.js'
'@MyBundle/Resources/public/app/src/lib/fullcalendar.js'
'@MyBundle/Resources/public/app/calendar.js'
'@MyBundle/Resources/public/app/src/lib/angular-route.js'
'@MyBundle/Resources/public/app/schedulePlanner.js'
 %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Klaster_1 Нет войне
  • 11,790
  • 9
  • 61
  • 73
Ravi
  • 46
  • 5
  • What do you mean by "they are loading twice"? Is the ` – Nicolai Fröhlich Jan 31 '14 at 08:39
  • Can you post the resulting HTML please? – Carlos Vergara Feb 10 '14 at 04:36

1 Answers1

16

I had a similar issue which turns out was caused by a misplaced {% endblock %} tag.

Here was my base view:

{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}{% endblock %}</title>
        {% block header %}{% endblock %}
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        <!--[if lt IE 9]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>.</p>
        <![endif]-->

        {# debug #}
        {% if pre is defined and pre is not empty and app.environment == 'dev' %}
            <pre>
                {{ pre }}
            </pre>
        {% endif %}

        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

And here was the bundle template that extended:

{% extends "::base.html.twig" %}

{# title #}
{% block title %}{% endblock %}

{% block header %}
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
{% endblock %}

{# style #}
{% block stylesheets %}
{% endblock %}

{# body #}
{% block body %}

    {% block content_header %}
        <div class="header"><div class="header-in">
            <header>
            </header>
        </div></div>

        <div class="nav"><div class="nav-in">
            <nav>
                <ul id="menu" class="menu clearfix">
                    {% block content_header_nav %}
                    {% endblock %}
                </ul>
            </nav>
        </div></div>
    {% endblock %}

    <div class="block"><div class="block-in">

        <div class="content"><div class="content-in clearfix">

            {% set notices = app.session.flashbag.get('notices') %}
            {% if notices is not empty %}
            <ul class="msg ajax-flash-msg">
              {% for notice in notices %}
              <li>{{ notice }}</li>
              {% endfor %}
            </ul>
            {% endif %}

            {% block content %}{% endblock %}

        </div></div>

    </div></div>

    <div class="footer"><div class="footer-in">
        <footer>
            {% block footer %}{% endblock %}
        </footer>
    </div></div>

    {# javascript #}
    {% block javascripts %}
    <script src="{{ asset('assets/require.js') }}"></script>
    {% endblock %}

{% endblock %}

You'll notice I had my javascript block inside of the body block in the bundle template which caused it to render twice upon html outputing to the browser.

To fix I moved the javascript block outside of the body block.

ooXei1sh
  • 3,459
  • 2
  • 27
  • 47