1

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

Tanya H
  • 129
  • 2
  • 3
  • 9
  • I suggest you to read [this answer about the different ways to include jQuery](http://stackoverflow.com/a/41324944/1941316). – Kwadz Jan 14 '17 at 11:17

1 Answers1

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/

Dani Sancas
  • 1,365
  • 11
  • 27
  • I have changed my script to include jquery, {% block javascripts %} {% 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". – Tanya H Jul 17 '13 at 13:45
  • Forget the `{{ parent() }}`. The point is, in fact, two points: **1-** You must include `` 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` – Dani Sancas Jul 17 '13 at 13:55
  • Maybe the following code (below) is not working (thus JQuery is not bring used); – Tanya H Jul 17 '13 at 13:56
  • 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. – Tanya H Jul 17 '13 at 13:58
  • Well, still not working? Another clue? Maybe a log message in the Chrome or Firebug console? – Dani Sancas Jul 17 '13 at 14:01
  • Maybe that slow load is the `sortable effect`? – Dani Sancas Jul 17 '13 at 14:12
  • I'll try to figure out how to do this - I'm unsure how to access the files. I don't use Chrome or Firebug. – Tanya H Jul 17 '13 at 14:13
  • In my honest opinion you should, because Google Chrome and FireFox (and FireBug extension) provides powerfull tools for debuging web. – Dani Sancas Jul 17 '13 at 14:15
  • I installed FireBug. I enabled the console. I accessed my website again. The consol's log is empty. – Tanya H Jul 17 '13 at 14:36
  • What do you need right now? Is the table correctly displayed? – Dani Sancas Jul 17 '13 at 14:50
  • I am trying to have a table made with DataTables with sortable columns. Right now, I have a page that renders a regular html table (no sorting, no css). – Tanya H Jul 17 '13 at 15:02
  • The console found an error; ReferenceError: $ is not defined $(document).ready( function () { – Tanya H Jul 17 '13 at 15:55
  • 1
    That error is saying "I cannot recognize that jQuery function", so make sure you are properly adding the jQuery library :) – Dani Sancas Jul 17 '13 at 15:57