Symfony 2 append Javascripts, just one request

Question

I have a layout.html.twig with:

    {% block js %}
        {% javascripts 
            'Resources/public/js/jquery/jquery-1.7.1.min.js' 
            'Resources/public/js/jquery/jquery.namespace.js' 
            %}
            <script src="{{ asset_url }}" type="text/javascript"></script>
        {% endjavascripts %}
    {% endblock %}

And I have index.html.twig with

{% extends "MichaelMikeBundle::layout.html.twig" %}
{% block js %}
    {{ parent() }}
    {% javascripts 
        '@MichaelStoreBundle/Resources/public/js/index.js' 
        'Resources/public/js/jqueryui/jquery.ui.core.js'
        'Resources/public/js/jqueryui/jquery.ui.widget.js'
        'Resources/public/js/jqueryui/jquery.ui.button.js'
    %}
    <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

I production mode page returns two js files (two requests). Symfony2 merges two files from layout and outputs as one request and it does the same for index - it merges 4 files and outputs as another request.

My question is: Is is possible to have layout and index files like in my example output all js as one request? Or at least append javascripts from index file into layout...

Thanks for any help guys!

[Duplicate?](http://stackoverflow.com/questions/8949548/twig-assetic-stylesheets-among-several-templates). From there: it's impossible right now. — meze, Jan 23 '12 at 12:27
@TroodoN-Mike I'm facing the same issue. what's the solution for this?? — Yash Parekh, Mar 29 '18 at 13:13

score 3 · Answer 1 · answered Jan 23 '12 at 17:35

3

For insert js files in the twig i write:

{% block javascripts %}
    {{parent()}}    

    <script src="{{ asset('public/js/userprofile.js') }}" type="text/javascript"></script>  

{% endblock %}

public is in Symfony/web/ directory.

Is this all that you want?

answered Jan 23 '12 at 17:35

Santi

509
2
6
20

no, my example provides 2 requests (downloading js files). Your code will also produce 2 requests (and add one for each additional line of your script). We need to get the code right so that it returns only one request(js). – TroodoN-Mike Jan 23 '12 at 18:44

score 3 · Accepted Answer · answered Jan 23 '12 at 20:49

You would have to remove the call to {{ parent() }}, copy the parent asset definition to the template, and add more inputs there.

{% extends "MichaelMikeBundle::layout.html.twig" %}
{% block js %}
    {% javascripts 
        'Resources/public/js/jquery/jquery-1.7.1.min.js' 
        'Resources/public/js/jquery/jquery.namespace.js' 
        '@MichaelStoreBundle/Resources/public/js/index.js' 
        'Resources/public/js/jqueryui/jquery.ui.core.js'
        'Resources/public/js/jqueryui/jquery.ui.widget.js'
        'Resources/public/js/jqueryui/jquery.ui.button.js'
    %}
    <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

There is not better support for this because it is not a good practice. The user has already downloaded the first two entries when the layout was first rendered. It makes more sense to set far-future expiration headers than to merge those Javascripts into the child template's.

How is it bad practice when want to use jquery and namespace plugin in all of my pages? I cant imagine upgrading version of jquery with a new version and update all of my child templates where I should only change it in one place (parent template - layout.html.twig in this case). Each child template should only append "block js" to the parent so that there is only one request instead of multiple. — TroodoN-Mike, Jan 23 '12 at 22:42

Symfony 2 append Javascripts, just one request

2 Answers2