Loading JavaScript twice in Symfony
When I expand mine base.html.twig
, my JS is loaded 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 %}
+1
source to share
1 answer
I had a similar problem that turned out to be caused by a misplaced tag {% endblock %}
.
Here's my basic 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 is the extended package template:
{% 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 will notice that I had a javascript block inside a body block in the package template, which caused it to render the html twice, outputting the browser.
To fix, I moved the javascript block outside of the body block.
+11
source to share