Ajouter un formulaire twig dans une fenêtre modale ou popup

**frieden** · 01/06/2016, 18h05

Bonsoir à tous,

Je débute en Symphony et je rencontre un petit problème. En effet j'ai un formulaire qui marche bien 'register.html.twig' que j'aimerais afficher automatiquement dans une popup à l'ouverture de ma page d'accueil 'index.html.twig'. En Javascript, html c'est OK, mais dans l'environnement Symphony, je ne sais pas comment m'y prendre.

Quelqu'un aurait-il une piste pour moi. Merci d'avance .

**dukoid** · 01/06/2016, 20h34

ça n'a aucun rapport avec Symfony.

tu utilises le composant d'une technologie que tu veux pour faire un modal, par exemple en bootstrap 3 :

http://getbootstrap.com/javascript/#modals

**frieden** · 02/06/2016, 22h14

Merci pour votre réponse.

J'ai essayé avec bootstrap. Ca marche, la popup s'ouvre correctement avec un bouton. Mais ce que je voulais c'est qu'elle s'ouvre automatiquent au chargement de la fenetre index.html.twig. Donc, j'ai ajouté dans index.html.twig, bien avant le bloc body le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{% block javascript %}
    window.onload = function() {
    $('#myModal').modal('show');
    };
{% endblock %}

Mais au lancement de la fenêtre, rien ne se passe. J'ai même essayé de debugger en remplacant $('#myModal').modal('show') par un alert('hello"). J'ai l'impression que mon code n'est pas du tout pris en compte. Savez-vous pourquoi?

**dukoid** · 02/06/2016, 22h25

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{% block javascript %}
   <script type="text/javascript">
   ...
   ...

**frieden** · 03/06/2016, 14h04

Bonjour,

Je l'ai également testé avec la balise script. Toujours pas de réaction. Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
{% block javascript %}
    <script type="text/javascript">
        window.onload = function() {
            alert("hello");
            $('#myModal').modal('show');
        };
    </script>
{% endblock %}

Quel peut être le problème? J'ai aussi remarqué que l'import des 2 fichiers javascript (jquery-1.12.3.min.js et bootstrap.min.js) de bootstrap interférait avec les 3 fichiers javascripts initiaux de mon application (Ci-dessous les imports javascript). Cela a pour conséquence que l'animation du slideshow sur la page index qui fonctionnait correctement avant l'import des 2 derniers fichiers javascript ne fonctionne plus.

En effet, mon fichier index.html.twig hérite d'une page layout.html.twig avec avec pour contenu le bloc javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 {% block javascripts %}
 
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>
        <script src ="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}" type="text/javascript"></script>
        <script src ="{{ asset('bundles/lbsecole/js/bootstrap.min.js')}}" type="text/javascript"></script>
        {% endblock %}

Quel peut-en être la cause de ces 2 problèmes. Je rappelle que je suis novice en javascript. Encore merci pour vos retours.

**dukoid** · 03/06/2016, 14h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        {% block javascripts %}
            {{ parent() }}
 
            <script type="text/javascript">
 
                $(document).ready(function(){
                   alert("xxxxxxxxxx");
                 });
             ...
           ...

1)
le {% block javascripts %} est bien dans le block BODY ?

2) est ce qu'il y a une erreur javascript ? car toute erreur qui survient bloque l’exécution...
dans la console de firebug on peut le voir....

3)
verifier que jquery.js et bootstrap.js est bien chargé.
plusieurs façon de faire :
tu affiches le code source de la page et tu cliques sur les 2 liens : jquery.js et bootstrap.js
si ok alors le code source de jquery.js et bootstrap.js s'affichent

**frieden** · 03/06/2016, 15h17

Rebonjour,

Ca marche à présent, l'erreur venait du "s" qui manquait à mon % bloc javascript % comme sur la page parente layout.html.twig.
La popup s'affiche correctement. Mais le problème que je n'arrive pas à résoudre c'est l'interférence des fichiers css et javascript de bootstrap sur mes fichiers css et javascript existants. L'animation du slideshow ne marche plus et le css est adapté par rapport aux classes de bootstrap.

Y a t'il une possibilité pour que bootstrap ne soit utilisé que sur la page popup et non sur la page index.html.twig?
Je rappelle que c'est uniquement dans la page popup que j'ai ajouté des références à bootstap. Mais je suppose que c'est parce que dans la page index.html.twig, je fais un include de la page popup.html.twig, que les références à bootstrap sont automatiquement chargés sur la page index. Ai-je raison? Si oui, comment éviter ces interférences "utiles", mais pas au bon endroit.

Merci

**dukoid** · 03/06/2016, 15h54

as tu identifié la variable ou le nom de la fonction qui pose problème car je suppose que c'est peut être un double dans l'un et l'autre

**frieden** · 03/06/2016, 16h10

J'ai l'erreur suivante qui se répète pour le css

Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped.
Error in parsing value for 'background-image'. Declaration dropped.

dans bootstrap-theme.min.css ; et du côté javascript:

unreachable code after return statement jquery.min.js:19:13091
TypeError: $(...).tabs is not a function

simultanément dans jquery.min.js et sur la page index.

Est-il possible d'exclure les références à bootstap (javascript et css) sur la page index qui contient le slideshow et de n'exécuter qu'uniquement les fichiers css et javascript existants?

**dukoid** · 03/06/2016, 18h18

je crois que c'est un pb de version de jquey.min, jquery....

**frieden** · 06/06/2016, 12h18

Rebonjour Dukoid,

Oui c'est ce que je pense, mais j'ai vraiment besoin des 2 versions: les 3 premieres imports pour que le slideshow de ma page d'accueil marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>

et les 2 imports pour que la popup de bootstrap se lance automatiquement lorsque je suis sur la page d'accueil

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        <script src ="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}" type="text/javascript"></script>
        <script src ="{{ asset('bundles/lbsecole/js/bootstrap.min.js')}}" type="text/javascript"></script>

.

Que faire? Lorsque je supprime une des deux imports, une fonctionnalité sur deux marche. Merci

**dukoid** · 06/06/2016, 12h38

tu le mets en premier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script src ="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}" type="text/javascript"></script>

**vinmar** · 06/06/2016, 13h14

Salut,

Est-ce que le problème à la base ne serait pas par hasard de charger 2 jQuery dans ta page ? Si tu veux utiliser des trucs tout fait, pas de problèmes, par contre, je pense que tu peux trouver un slideshow qui utilise la même version de jquery que pour Bootstrap.

D'ailleurs, si tu vas sur le dépôt GitHub de hoverIntent, il est compatile jquery 1.9+ donc je pense que tu peux réussir à avoir un seul jQuery pour toute tes fonctionnalités.

**frieden** · 06/06/2016, 14h16

Rebonjour,

Oui, c'est un problème qui vient du chargement des 2 jquery

- Lorsque je fais passer en avant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src ="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}" type="text/javascript"></script>

;
la popup qui devrait normalement marcher(parce qu'elle utilise cette version de jquery ne marche plus) mais le slideshow par contre marche!

- Lorsque j'enlève

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>

;
la popup marche mais le slideshow ne marche pas... (problème de compatibilité je pense)

**vinmar** · 06/06/2016, 14h50

Attends, il faut faire un point. Tu as :

- jquery-1.12.3.min.js
- jquery-ui-1.7.2.min.js
- jquery.hoverIntent.minified.js annoncé fonctionnant avec jquery 1.9.1+
- js/jquery.min.js ??? Pourquoi ? Quelle est la version de ce jquery ?
- la modal de bootstrap, quelle version de Bootstrap ?

Ce qu'il te faut c'est par ordre :
1. jquery > dans une version requise par tous les autres scripts. (au vue de tes scripts il te faut au moins 1.9.1+)
2. jquery-ui > la 1.7.2 date du 19/06/2009 => je pense que tu peux utiliser une version plus récente. => en as tu vraiment besoin car ni jquery.hoverIntent, ni bootstrap n'en ont besoin.
3. jquery.hoverIntent > lui demande au moins jquery 1.9.1+ (dans son exemple il utilise jquery-1.11.3.min.js)
4. bootstrap.js > quelle version de bootstrap ? Bootstrap v3 demande jquery 1.9.1+. La version 2 demande au minimum 1.8.0

Donc normalement il te faut un seul jquery (minimum version 1.9.1+). Ton slideshow c'est jquery.hoverIntent au un autre truc ? Si c'est un autre truc il lui faut quelle version de jquery ?

**frieden** · 07/06/2016, 13h15

Rebonjour à tous, j'ai appliqué les recommandations, mais ça n'a pas marché. Mais je pense avoir trouvé la cause. IL me semble donc correct de vous exposer en profondeur le projet. Je poursuis un projet que quelqu'un d'autre avait entammé.

En effet, je travaille sur 3 pages: index.html.twig, layout.html.twig et popup.html.twig (Ci-dessous)
- index.html est la page d'accueil qui hérite de layout.html qui contient tout ce qui est css et javascript.
- layout.html contient des références aux fichiers javascripts jquery.min.js (version 1.3.2), jquery-ui-1.7.2.min.js et jquery.hoverIntent.minified.js (à sa version r5) et annoncé compatible avec jquery.1.1.2+. Layout.html.twig integre aussi des scripts additionnels pour afficher les liens de menu (hoverIntent est donc indispensable) puis à animer les images du slideshow(probablement grâce à jquery-ui-1.7.2.min.js)
- popup.html est la nouvelle page(la popup que je souhaite lancer automatiquement à l'ouverture de index.html.twig)
Donc il me fallait utiliser bootstrap 3 avec bootstrap.js et jquery-1.12.3.min.js et intégrer le code de la popup dans la page index.html.twig.

Ci-dessous le contenu de ces 3 pages. (Une version sans la fonctionnalité popup est disponible en ligne www.lome-bs.com)

LAYOUT.HTM.TWIG

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
    <head>
 
        {% block headermeta %}{% endblock %}
        {% block metadata %}{% endblock %}">
        <title>Lom&eacute; Business School | {% block title %}{% endblock %}</title>
 
        {% block stylesheets %}
 
        <link rel="stylesheet" href="{{ asset('bundles/lbsecole/css/styles.css')}}" type="text/css" media="screen" />
        <link rel="stylesheet" href="{{ asset('bundles/lbsecole/css/style.css')}}" type="text/css" media="screen" />
        {% endblock %}
 
        <style type="text/css" >
            #featured .ui-tabs-panel .info {
                display:none;
            }
        </style>
    </head>
 
    <body id="home" class="index"> <!--<![endif]--> 
        <div id="wrapper"><!--Stard #wrapper-->
            <div id="header"><!--Stard .header-->
                <div id="banner">
                    <div id="logo">
                        <img src="{{asset('bundles/lbsecole/images/logo.png')}}" alt="LBS logo"/>
                    </div>
                    <div id="logo-next">
                        <img src="{{asset('bundles/lbsecole/images/logo-next.png')}}" alt="LBS definition"/>
                    </div>
                    <img src="{{asset('bundles/lbsecole/images/logo-down.png')}}" style="margin: 49px 0pt 0pt 194px;" alt="LBS slogan"/>
                </div>
                <div id="menu">
                    {% include 'LbsEcoleBundle::menu.html.twig' %}
                </div><!--End .header-->
            </div>
            <div id="content">
                {% block content %}
                {% endblock %}
            </div>
            <div class="clear"></div>
            <div id="footer"><!--start .footer-->
                {% include 'LbsEcoleBundle::footer.html.twig' %}
            </div><!--End .footer-->
        </div><!--END #wrapper-->
 
        {% block javascripts %}
 
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>
 
        {% endblock %}
 
    {% block javascript %}
 
 
    {% endblock %}
        <script type="text/javascript">
            $(document).ready(function() {
 
 
                $("#featured").tabs({fx:[{opacity: "toggle", duration: 'slow'}, {opacity: "toggle", duration: 'normal'}],
                    show: function(event, ui){
                        $('#featured .ui-tabs-panel .info').hide();
                        var infoheight=$('.info', ui.panel).height();
                        $('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
                    }
                }).tabs("rotate", 5000, true);
                $('#featured').hover(
                    function(){ $('#featured').tabs('rotate', 0, true); },
                    function(){ $('#featured').tabs('rotate', 5000, true); }
                );
                $('#featured .ui-tabs-panel a.hideshow').click(function(){
                    if($(this).text()=='Hide'){
                        $(this).parent('.info').animate({ 'height': '0px' }, 500);
                        $(this).text('Show');
                    }
                    else{
                        $(this).parent('.info').animate({ 'height': '70px' }, 500);
                        $(this).text('Hide');
                    }
                    return false;
                });
 
                function megaHoverOver(){
                    $(this).find(".sub").stop().fadeTo('fast', 1).show();
 
                    //Calculate width of all ul's
                    (function($) {
                        jQuery.fn.calcSubWidth = function() {
                            rowWidth = 0;
                            //Calculate row
                            $(this).find("ul").each(function() {					
                            rowWidth += $(this).width(); 
                            });	
                        };
                    })(jQuery); 
 
                    if ( $(this).find(".row").length > 0 ) { //If row exists...
                        var biggestRow = 0;	
                        //Calculate each row
                        $(this).find(".row").each(function() {							   
                            $(this).calcSubWidth();
                            //Find biggest row
                            if(rowWidth > biggestRow) {
                                biggestRow = rowWidth;
                            }
                        });
                        //Set width
                        $(this).find(".sub").css({'width' :biggestRow});
                        $(this).find(".row:last").css({'margin':'0'});
                    } else { //If row does not exist...
                        $(this).calcSubWidth();
                        //Set Width
                        $(this).find(".sub").css({'width' : rowWidth});
                    }
                }
 
                function megaHoverOut(){
                    $(this).find(".sub").stop().fadeTo('fast', 0, 
                        function() {
                            $(this).hide(); 
                    });
                }
 
 
                var config = {    
                    sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
                    interval: 100, // number = milliseconds for onMouseOver polling interval    
                    over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
                    timeout: 500, // number = milliseconds delay before onMouseOut    
                    out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
                };
 
                $("ul#topnav li .sub").css({'opacity':'0'});
                $("ul#topnav li").hoverIntent(config);
                {% block document_ready %}
                {% endblock %}
            });
        </script>
 
    </body>
</html>

INDEX.HTM.TWIG

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
{% extends 'LbsEcoleBundle::layout.html.twig' %}
{% block headermeta %}
<meta name="google-site-verification" content="TnyENrr8iMLrMf9KSeGlTTGeP_EFNqzRJOSSZj8g5qI" />
<meta name="msvalidate.01" content="5825D3C062C6EB41D83BC17333AEAD61" />
{% endblock %}
{# Metadata de l'article #}
{% block metadata %}
    LBS
{% endblock %}
{# Titre de l'article #}
{% block title %}
    Bienvenue
{% endblock %}
{% block javascript %}
    <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}"></script>
    <script src ="{{ asset('bundles/lbsecole/js/bootstrap.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function() {
            $('#myModal').modal('show');
        };
    </script>
{% endblock %}
 
{% block content %}
 
 
    <!--Stard #content-->
    <div id="featured" >
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="{{asset('bundles/lbsecole/images/slide/image1-small.jpg')}}" alt="" /><span>Réussir dans l'innovation</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="{{asset('bundles/lbsecole/images/slide/image2-small.jpg')}}" alt="" /><span>Se former différemment</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="{{asset('bundles/lbsecole/images/slide/image3-small.jpg')}}" alt="" /><span>S'ouvrir au monde</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="{{asset('bundles/lbsecole/images/slide/image4-small.jpg')}}" alt="" /><span>Cultiver la passion du métier</span></a></li>
 
        </ul>
 
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="{{asset('bundles/lbsecole/images/slide/image1.jpg')}}" alt="" />
             <div class="info" >
                    <h2><a href="#" >Apprendre</a></h2>
                    <p>Formation.</p>
             </div>
        </div>
 
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="{{asset('bundles/lbsecole/images/slide/image2.jpg')}}" alt="" />
             <div class="info" >
                    <h2>LBS: Ouvrir</h2>
                    <p>Un cadre </p>
             </div>
        </div>
 
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="{{asset('bundles/lbsecole/images/slide/image3.jpg')}}" alt="" />
             <div class="info" >
                    <h2><a href="#" >Proposer </a></h2>
                    <p>Nous proposons </p>
             </div>
        </div>
 
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="{{asset('bundles/lbsecole/images/slide/image4.jpg')}}" alt="" />
             <div class="info" >
                    <h2><a href="#" >Penser </a></h2>
                    <p>Audacieux.</p>
             </div>
        </div>
    </div>
 
 
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel"></h4>
                            </div>
                            <div class="modal-body">
 
                                {#   {% render 'LbsEcoleBundle:Default:popup' %}#}
                                {% include 'LbsEcoleBundle:Front:popup.html.twig' %}
 
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
 
 
 
 
 
 
            </div>
        </div>
    </div>
 
 
<!--End #content-->
{% endblock %}

POPUP.HTML.TWIG

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/lbsecole/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/lbsecole/css/bootstrap-theme.min.css')}}">
 
{% block content %}
 
    Hello World; Testing...
 
{% endblock %}

Regardez-avec moi si tout est en ordre. Actuellement la popup fonctionne avec ce code, mais ni les liens de menu, ni le slideshow ne s'anime (en local).Y a t-il une possibilité que la popup et les autres scripts fonctionnent ensemble. Merci

**vinmar** · 07/06/2016, 15h43

Salut,

Pour répondre à "Regardez-avec moi si tout est en ordre.", je te dirais non. Le problème, c'est dans ta méthode de reprise de l'existant. Face à ce type de problème, il faut que tu choisisses :

Soit tu gardes l'existant, et dans ce cas là tu reste sur des "composants" compatibles.
Soit tu fais une refonte complète de l'existant.

Tu ne peux pas faire entre les deux. A toi de voir quelle est la meilleure solution. Pourquoi je te dis ça :

Bootstrap est un framework UI récent, lorsque je dis récent c'est par rapport à ton jquery existant (v1.3.2) datant du 20/02/2009. Le premier bootstrap date de 2011. Du coup, tu vas te bouffer les doigts à essayer de faire fonctionner tout ça ensemble.
La structure de tes fichiers *.html.twig sont perfectibles, peut-être revoir la doc sur les templates twig
Effectivement, ton slideshow fonctionne avec jquery-ui tabs, je pense que tu peux mettre à jour jquery-ui et le garder.

Pour moi, quitte à perdre du temps là-dessus, je prendrais le temps de refaire au propre tout cela (mise à jour des scripts, etc.). A toi de voir.

**frieden** · 07/06/2016, 16h47

Bonjour Vinmar, vous êtes un champion

!

Je vais opter pour une refonte complète et méthodique. Bien que techniquement, je ne sache qu'afficher une boite de dialogue en javascript

, ça me donnera une base solide à la fois en Symphony et en Javasript.

1ere chose faite: J'ai mis à jour tous les jquery vers leurs dernières versions. Donc à la place de:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>

J'ai présentement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
           <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}"></script>
            <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.11.4.min.js')}}"></script>
            <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.1.8.0.minified.js')}}"></script>

Maintenant, j'hésite un peu pour la prochaine étape. Vraiment Merci pour votre soutien

**vinmar** · 07/06/2016, 17h48

Maintenant, il faut que tu comprennes les templates twig et le système d'héritage.

Un template Twig est composé de {% block %} dont le contenu peut-être écrasé (ou complété) dans un template enfant. Sur ce principe et en regardant la doc Symfony, il faut que tu réorganises tes {% block %} en commençant par le layout principal et ainsi de suite.

En gardant à l'esprit que :

Dans le principal tu trouvera les éléments de ta page qui sont communs à toutes les pages (jquery par exemple) et plus tu descends dans les templates, plus ce que tu rajoutes (ou enlèves) est spécifique à ta page.
Tu peux voir les {% block %} comme des ensembles logiques d'éléments, englobe que du javascript, ou que des liens vers les feuilles de style, ou le menu de ton site, etc.)

Là, faut que tu lises la doc officielle de Symfony sur les templates (donné dans les messages précédents).

Bon courage,

**frieden** · 08/06/2016, 13h26

Bonjour Vinmar,

Grâce à vous, j'ai optimisé mes blocks, et une bonne nouvelle encore, c'est que j'ai réussi à faire charger les 2 jquery sur le même grâce à "$.noConflict" La méthode est assez efficace, elle réinitialise la valeur de la variable $ qui est un alias à jquery. Grâce à elle, on peut aussi personnaliser l'alias pour appelet une version spécifique de jquery. Et ça a marché, regardez!

LAYOUT.HTML.CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
         {% block javascripts %}
            <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
            <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
            <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>
        {% endblock %}

INDEX.HTML.CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
{% block js %}
 
    <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}"></script>
    <script src ="{{ asset('bundles/lbsecole/js/bootstrap.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        var jq= $.noConflict();
        window.onload = function() {
            jq('#myModal').modal('show');
        };
    </script>
{% endblock %}

Mais le petit hic, c'est que bootstrap.css interagit sur mes autres fichiers de style. Mais ça c'est une autre histoire.

Encore Merciiii

Ajouter un formulaire twig dans une fenêtre modale ou popup [2.x]

Symfony PHP

Discussions similaires

Partager

Partager