Impossible d'interpréter du JS avec Twig

Version imprimable

Amis du jour, bonjour !

Récemment je me suis mis à Symfony2 dans le but de construire un projet qui me tiens à cœur mais je bute sur un petit problème, je n'arrive pas à faire fonctionner mon JS dans Twig !!!

Voici le code dans twig qui ne marche pas :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <html> <head> <title>MultiGamingTournament</title> {% block stylesheets %} <link rel="stylesheet" type="text/css" href="{{ asset('/css/jquery.bracket.css') }}" /> {% endblock %} </head> <body> {% block javascripts %} <script src="{{ asset('/js/jquery.min.js') }}" type="text/javascript" ></script> <script src="{{ asset('/js/jquery-ui-1.8.16.custom.min.js') }}" type="text/javascript" ></script> <script src="{{ asset('/js/jquery.bracket.js') }}" type="text/javascript" ></script> <script src="{{ asset('/js/jquery.json-2.3.min.js') }}" type="text/javascript" ></script> <script type="text/javascript"> var autoCompleteData = { teams : [ ["Jean","Jack"],["",""] ], results : [ ] }</script> <script src="{{ asset('/js/brackets-rd.js') }}" type="text/javascript" ></script> {% endblock %} <div id="autoComplete"></div> <h1>{{ odc.nom }}</h1> <p> {{ odc.equipes }} </p> </body> </html>
Et pourtant j'ai bien mis les scripts JS dans le fichier ressource/public de mon bundle.

Le code en php qui marche parfaitement :

Citation:

<html>
<head>
<title>MultiGamingTournament</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.bracket.js"></script>
<script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
echo '<script type="text/javascript">var autoCompleteData = {
teams : [ ["Jean","Jack"],["",""] ],
results : [ ] }</script>';
<script type="text/javascript" src="js/brackets-rd.js"></script>
<?php /* } */ ?>

<link rel="stylesheet" type="text/css" href="css/jquery.bracket.css" />
</head>
<body>
<div id="autoComplete"></div>
</body>
</html>

Merci d'avance de votre aide !

Bonne journée.

17/08/2015, 12h44
arnooo999
Bonjour,

cela vient du fait que twig possède plusieurs stratégie pour escaper le contenu (html, js, ...)
cf : http://twig.sensiolabs.org/doc/filters/escape.html

une solution simple sans avoir à jouer sur le paramètres escape
Code:

1 2 3 {%set autoCompleteDataInTwig = {"teams": [ ["Jean","Jack"],["test","toto"]]} %} <script type="text/javascript"> var autoCompleteData = {{ autoCompleteDataInTwig | json_encode }}</script>

2 pièce(s) jointe(s)

Citation:

Envoyé par arnooo999

Bonjour,

cela vient du fait que twig possède plusieurs stratégie pour escaper le contenu (html, js, ...)
cf : http://twig.sensiolabs.org/doc/filters/escape.html

une solution simple sans avoir à jouer sur le paramètres escape

Code:

1
2
3
 
{%set autoCompleteDataInTwig = {"teams": [ ["Jean","Jack"],["test","toto"]]} %}
<script type="text/javascript"> var autoCompleteData = {{ autoCompleteDataInTwig | json_encode }}</script>

Encore plus étonnant, j'ai modifié les routes et emplacements des assets pour que ça soit plus clean.

Il s’avère qu'avec votre code, rien ne s'affiche alors qu'avec le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
    <head>
        <title>MultiGamingTournament</title>
 
        {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('bundle/interactionjsonbdd/css/jquery.bracket.css') }}" />
        {% endblock %}
 
    </head>
    <body>
 
        {% block javascripts %}
        <script src="{{ asset('bundles/interactionjsonbdd/js/jquery.min.js') }}" type="text/javascript" ></script>
        <script src="{{ asset('bundles/interactionjsonbdd/js/jquery-ui-1.8.16.custom.min.js') }}" type="text/javascript" ></script>
        <script src="{{ asset('bundles/interactionjsonbdd/js/jquery.bracket.js') }}" type="text/javascript" ></script>
        <script src="{{ asset('bundles/interactionjsonbdd/js/jquery.json-2.3.min.js') }}" type="text/javascript" ></script>
 
        <script type="text/javascript">var autoCompleteData = {
            teams : [ ["Jean","Jack"],["",""] ],
            results : [ ] }</script>
 
        <script src="{{ asset('bundles/interactionjsonbdd/js/brackets-rd.js') }}" type="text/javascript" ></script>
        {% endblock %}
 
        <div id="autoComplete"></div>
 
        <h1>{{ odc.nom }}</h1>
        <p> {{ odc.equipes }} </p>
 
 
 
    </body>
</html>

J'ai le nom des équipes ainsi que leurs scores par défaut mais sans aucune mise en page...

En php :

Pièce jointe 185602

Avec twig :

Pièce jointe 185603

17/08/2015, 18h07
Alain-De-Loin

1 pièce(s) jointe(s)

Pièce jointe 185635

Crée le dossier js s'il n'est pas déjà créé dans web et copie tes fichier js.

Ensuite dans ton layout appel les comme ça :

Code:

<script src="{{ asset('js/tonFichierJS.js') }}"></script>