Separating JavaScripts file in symfony4 twig templates

Question

I have a question about, how to separate a loading specify javascript file of specify template twig file.

I got for example admin.html.twig which extends base.html.twig, in base i got

   {% block javascripts %}

      <script src="/assets/js/core/jquery.min.js"></script>
      <script src="/assets/js/core/popper.min.js"></script>
      <script src="/assets/js/core/bootstrap-material-design.min.js"></script>
      <script src="/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>

      <script async defer src="https://buttons.github.io/buttons.j"></script>
      <script src="/assets/js/plugins/chartist.min.js"></script>
      <script src="/assets/js/plugins/bootstrap-notify.js"></script>
      <script src="/assets/js/material-dashboard.min.js"></script>
      <script src="/assets/demo/jquery.sharrre.js"></script>
      <script src="/assets/js/sparkline.js"></script>
      <script src="/assets/js/plugins/chartjs.min.js"></script>
    {% endblock %}

and I got next file like dashboard.html.twig which extends a admin.html.twig file, and my question is that in dashboard.html.twig file i got at the a little writed-self small javascript code, and this javascript of course use a jquery library but this library i loaded in base.html.twig file a next of my selfwrited script which is in dashboard.html.twig.

My question is, how i can for example load my small code of javascript (of course i can save it in separated file like mycode.js) but how to load only when this route of dashboard.html.twig file i used and after jquery is loaded ? becouse in another routers i dont need this mycode.js so I dont wanna put it to base.html.twig file in javascript block, any idea ?

In my opinion, to help others, the question title could be How to separate page specific JavaScripts files in symfony4 twig templates? Thanks! — Azhar Khattak
– Azhar Khattak, Commented Sep 6, 2018 at 19:32

DarkBee · Accepted Answer · 2018-09-06 12:48:25Z

1

If dashboard directly extends admin then u can do the following to ensure to load all the admin scripts and to add the dashboard specific script:

{% extends "admin.html.twig" %}
{% block javascripts %}
    {{ parent() }} {# execute the parent block, thus loading all scripts in admin #}
    <script src="/assets/js/dashboard/mycode.js"></script>
{% endblock %}

edited Sep 6, 2018 at 12:48

answered Sep 6, 2018 at 12:30

DarkBee

14.5k9 gold badges84 silver badges133 bronze badges

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

Comments

Ashutosh Rai · Accepted Answer · 2018-09-06 12:43:02Z

You can dived

{% extends "admin.html.twig" %} {# use only in case your all templates are at the same places like app/Resources/views/admin.html.twig #}
{% block javascripts %}
    {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
    <script src="/assets/js/dashboard/code.js"></script>
{% endblock %}

in case you are trying to extend a template from another bundle then you can use this

{% extends "YourBundleName:Default:admin.html.twig" %} {# YourControllerRelativeName just in case your view structure is like views/Default/admin.html.twig#}
    {% block javascripts %}
        {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
        <script src="/assets/js/dashboard/code.js"></script>
    {% endblock %}

to the better understanding you should read a little here: https://symfony.com/doc/2.8/templating.html Note:- in the documents you should change version as per your current version.

Azhar Khattak · Accepted Answer · 2018-09-06 19:38:06Z

0

I would suggest the following solution.

Declare the following block in base.html.twig after {% block javascripts %}{% endblock %}

{% block javascript_page %}{# specific code for current page #}{% endblock %}
Then in your page you can include page specific scripts

{% extends "admin.html.twig" %} or {% extends "base.html.twig" %}

{% block javascript_page %} <script src="/assets/js/pages/my_page.js"></script> {% endblock %}

Although answer by DarkBee is also correct but in this way you don't have to worry about calling {{ parent() }} in each page.

edited Sep 6, 2018 at 19:38

answered Sep 6, 2018 at 19:25

Azhar Khattak

87510 silver badges11 bronze badges

1 Comment

flow Over a year ago

Thank you for all answers ! great, yes i need to read about templating twig

Collectives™ on Stack Overflow

Separating JavaScripts file in symfony4 twig templates

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related