How to use JQuery in TWIG (symfony2)

Question

I am currently trying to use JQuery in TWIG. My website was created using Symfony2. I currently have a table in TWIG (it works - see below), for which I would like to make use of JQuery in order to make my table columns sortable.

<table><tr><th>cat</th> <th>dog</th> <th>fish</th> </tr> {% for result in results %}<tr><td>{{result.cat_name}}</td><td>{% for dog in result.dogs %} {{dog.dog_name}}{% endfor %} </td> <td>{% if result.fishs is defined %} {% for fish in result.fishs %}
{{fish.fish_uri}}
  {% endfor %} {% endif %} </td></tr>{% endfor %}

I would like to make use of DataTables (see here) in order to get my desired functionality from my table. There's a bundle (see here) which was created to allow the use of DataTables in TWIG. The bundle was successfully installed (web/bundles/uamdatatables/).

What causes me uncertainty (as bundle did not have use instructions) is that I have tried to make the bundle work (to make my table have the features offered by DataTables), and yet my table remains unchanged (no error messages either).

Wondering if someone could tell me what I am doing wrong? I have never used JQuery before, and am new to Symfony. Do I need some kind of "include" statement (to get to js files)?

//view.html.twig

<table><table id="table_id" class="display"><thead> {% block stylesheets %}
<link href="{{ asset('/bundles/uamdatatables/css/jquery.dataTables.css') }}" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="/bundles/uamdatatables/css/jquery.dataTables.css"></script>
    {% endblock %}<tr><th>cat</th> <th>dog</th> <th>fishs</th> </tr></thead> <tbody><?php $(document).ready( function () {
$('#table_id').dataTable();} );?>{% block javascripts %}
        <script src="{{ asset('/bundles/uamdatatables/js/jquery.dataTables.js') }}"></script>
    {% endblock %}{% for result in results %}<tr><td>{{ result.cat_name}}</td><td>{% for dog in result.dogs %}{{dog.dog_name}}{% endfor %}</td><td>{% if result.fishs is defined %} {% for fish in result.fishs %}{{fish.fish_uri}}{% endfor %}{% endif %}</td></tr>{% endfor %}</tbody> </table>

Thank you! Tanya

I suggest you to read this answer about the different ways to include jQuery. — Kwadz
– Kwadz, Commented Jan 14, 2017 at 11:17

Dani Sancas · Accepted Answer · 2013-07-17 13:28:21Z

4

Yes, in your block of javascripts you must include the jQuery file. An example:

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('bundles/uamdatatables/js/jquery.min.js') }}"></script>
{% endblock %}

Take care not to overwrite inherited javascripts, maybe you have to add {{ parent() }} to the {% block javascripts %}

EDIT:

If you don't already have a jQuery file you can download it from the official website: http://jquery.com/

answered Jul 17, 2013 at 13:28

Dani Sancas

1,37511 silver badges27 bronze badges

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

13 Comments

Tanya H Over a year ago

I have changed my script to include jquery, {% block javascripts %} <script type="text/javascript" src="{{ asset('bundles/uamdatatables/js/jquery.min.js') }}"></script> {% endblock %}. This did not change my page. I then proceeded to use {{ parent() }} and got an error; "Calling "parent" on a template that does not extend nor "use" another template is forbidden".

Dani Sancas Over a year ago

Forget the {{ parent() }}. The point is, in fact, two points: 1- You must include <script type="text/javascript" src="{{ asset('bundles/uamdatatables/js/jquery.min.js') }}"></script> in the {% block javascripts %}, don't replace, just add that line. 2- do you really have the jquery.min.js file in that asset location? If you don't, you can download and put it there or, if you have the jQuery file in another location, yo can move it or rename the asset path

Tanya H Over a year ago

Maybe the following code (below) is not working (thus JQuery is not bring used); <?php $(document).ready( function () { $('#table_id').dataTable(); } );?>

Tanya H Over a year ago

I have kept the 2 lines of JQuery, and the JQuery.min.js file does exist in the asset location .. the table does seem to load slower than the rest of my page though - something IS happening.

Dani Sancas Over a year ago

That error is saying "I cannot recognize that jQuery function", so make sure you are properly adding the jQuery library :)

|

Collectives™ on Stack Overflow

How to use JQuery in TWIG (symfony2)

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related