IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Twig, Bouton qui ouvre un fenêtre modal ?


Sujet :

Symfony PHP

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 619
    Points : 196
    Points
    196
    Par défaut Twig, Bouton qui ouvre un fenêtre modal ?
    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>

  2. #2
    Nouveau Candidat au Club Avatar de Larabiz
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2022
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : septembre 2022
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    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

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 619
    Points : 196
    Points
    196
    Par défaut
    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 %}

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Bouton qui ouvre une fenêtre dans la fenêtre
    Par Castiel777 dans le forum jQuery
    Réponses: 0
    Dernier message: 08/02/2018, 10h29
  2. un bouton qui ouvre une fenêtre en Java
    Par dzsouma dans le forum Composants
    Réponses: 1
    Dernier message: 28/05/2015, 19h55
  3. Bouton "Imprimer" qui ouvre une fenêtre système
    Par caro_caro dans le forum Wicket
    Réponses: 1
    Dernier message: 04/06/2009, 18h06
  4. bouton "imprimer" qui ouvre la fenêtre système
    Par caro_caro dans le forum Wicket
    Réponses: 2
    Dernier message: 12/05/2009, 02h11
  5. [debutant] un bouton qui ouvre une fenetre
    Par dous dans le forum Composants
    Réponses: 6
    Dernier message: 21/11/2005, 10h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo