Discussion :

[Bruno13]

Bonjour à tous,

Sur un projet Sf6, dans un fichier html.twig, je voudrais ajouter un bouton qui lorsque l'on clique dessus ouvre une fenêtre modale.

Hélas, je ne sais pas pourquoi mais rien ne se passe quand je clique sur le bouton,
voici ci-dessous mon bout de code twig (que j'ai trouvé ici) et qui pour moi devrait fonctionner ?non ?

Ai-je oublié quelque chose ? un appel JS ou un truc de ce genre ?
A noter que le bouton s'affiche bien.

Code Twig :

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
<button type="button" class="btn btn-info btn-lg" href="#" data-toggle="modal"
    data-target="#myModal">U ARE WHAT YOU EAT
    !</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
 
        <!-- Modal content-->
        <div class="modal-content">
 
            <div class="modal-body">
                <!---->
                 mon body !
            </div>
            <div class="modal-footer"></div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
 
</div>

[Larabiz]

Effectivement, tu dois d'abord comprendre quel bibliothèque JavaScript te permet d'ouvrir la modal et ensuite lier correctement ton HTML avec le JavaScript.

— Benjamin de larabiz.fr

[Bruno13]

Bonjour Benjamin,

J'ai résolu le problème en utilisant un autre bout de code, j'avoue que je ne comprends pas pourquoi ça fonctionne maintenant mais je suppose que c'est dû à mon bootstrap+bootswatch.

C'est encore vraiment flou pour moi car je débute en symfony (à peine 2 mois).

Le bout de code ci-dessous fonctionne (si ça peut aider une autre personne rencontrant le même problème)
Il ouvre une fenêtre modal et affiche un sélecteur de fichier.

Code twig :

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
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importAnnModal">
            Import Annuités
        </button>
 
        <!-- Modal -->
        <div class="modal fade" id="importAnnModal" tabindex="-1" aria-labelledby="annModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="annuite_form" class="form" action="{{ path('mon.action') }}" enctype="multipart/form-data"  method="POST">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="annModalLabel">Sélection du fichier à importer</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <input type='file' name="annimport" class="form-control" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-primary">Importer</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

et dans ma base.html.twig

Code twig :

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

1
2
3
4
5
6
7
8
9
10
11
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.1/dist/spacelab/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.1/dist/spacelab/_variable.scss">
        {% endblock %}
 
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous" ></script>
        {% endblock %}