Symfony2 Assetic + Twig Template JavaScript Inheritance

Question

My problem:

I have 3 templates:

main.html.twig (main layout file)
layout.html.twig (a bundle specific layout override which contains some bundle specific JS tags)
create.html.twig (a page specific template file which also contains some page specific JS tags)

I am defining a block called 'javascript' in my base layout (main.html.twig), then overriding it (but calling {{ parent() }} in layout.html.twig. This works fine, and the JS tags from the main template file are still included above those in the layout.html.twig template.

I then do the same in the create.html.twig file, overriding the block as follows:

{% block javascripts %}
    {{ parent() }}
    {% javascripts '@BundleName/Resources/public/js/application.album.uploader.js'
                   '@BundleName/Resources/public/js/jquery.uploadify.js'
                   '@BundleName/Resources/public/js/swfuploadify.js' filter='?yui_js' %}
         <script src='{{ asset_url }}' type='text/javascript'></script>
    {% endjavascripts %}
{% endblock %}

At this point, instead of just overriding the javascript block in the parent (layout.html.twig) and including all the scripts defined in the templates above it, it does the following:

Dumps the <script> tags in the middle of the output (which causes an error, because in my main.html.twig file I am only including the jQuery library at the end of the HTML markup
Then it also dumps the scripts out along with the rest of the others (as I would expect it to)

I am not sure what is causing the scripts to be dumped in the middle of the create.html.twig template, and I'm also confused as to why they're being dumped to the screen twice (once in the middle of the create and then once at the bottom along with all the rest of my scripts from main.html.twig and layout.html.twig.

Has anyone got any ideas? Let me know if anything is unclear or if I can provide some more information.

EDIT:

File contents are below...

main.html.twig: https://gist.github.com/7f29353eaca0947528ce

layout.html.twig: https://gist.github.com/734947e9118b7765715e

create.html.twig: https://gist.github.com/c60c8d5c61e00ff86912

EDIT 2:

I've been having another look at the issue this morning and it looks as though its doing the same thing for stylesheets. I tried to define a new block called pagescripts in my layout.html.twig and then use the block in my create.html.twig but this had the same outcome, it just seems to dump the scripts and stylesheets wherever I use the

{% block pagescripts %} 
   (scripts here) 
{% endblock}

When the script tag is dumped in the middle of the page does it include the {{ parent() }} output also? — Kris Wallsmith
– Kris Wallsmith, Commented Jan 7, 2012 at 15:46
@KrisWallsmith any ideas that I could possibly try Kris? If need be I can post a stripped down version of the content of the files that are having the issue — JamesHalsall
– JamesHalsall, Commented Jan 10, 2012 at 13:39
@KrisWallsmith cool, I'll post a gist on github later on of the files that are to blame — JamesHalsall
– JamesHalsall, Commented Jan 10, 2012 at 14:04

JamesHalsall · Accepted Answer · 2012-01-14 11:08:56Z

2

I found the issue. In create.html.twig I was defining my {% block javascripts %} content inside inside my {% block content %}, so I assume Twig was rendering the output of the javascripts block inside the content block.

Moving the {% block javascripts %} content outside of the {% block content %} block fixed the issue.

answered Jan 14, 2012 at 11:08

JamesHalsall

13.5k4 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chopchop · Accepted Answer · 2012-01-10 13:17:23Z

0

Here is an example of main.html.twig:

<body>
    {% block stylesheets %}
    {% endblock %}

    {% block jsscript %}
    {% endblock %}

    {% block content %}
    {% endblock %}
</body>

into your create.html.twig

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

{% block jsscript %}
    my javascript files...
{% endblock %}

{% block content %}
<h1>Create</h1>

<form action="{{ path('entity_create') }}" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form) }}
    <p>
        <button type="submit">Create</button>
    </p>
</form>

 {% endblock %}

If you still have issue, you can add a document ready function :

$(document).ready(function() {
   // put all your jQuery goodness in here.
 });

answered Jan 10, 2012 at 13:17

Chopchop

2,95920 silver badges38 bronze badges

2 Comments

JamesHalsall Over a year ago

unfortunately the jQuery library does load but only later on, so I don't want to load the library twice... if my script tags rendered in the correct place the jquery library would be loaded before any use of it is made

NDM Over a year ago

jsscript == "javascriptscript"? :)

Collectives™ on Stack Overflow

Symfony2 Assetic + Twig Template JavaScript Inheritance

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related