Bonjour,
Je fais appel à vous car je n'arrive pas à ouvrir une fenêtre modal avec le modal body sur un twig différent du twig où je fais mon appel.
Je suis sur Symfony 4. Lorsque j'ai ma modal body sur une même page, elle se charge correctement.
Mon problème vient quand je veux mettre ma modal sur un autre twig.
Ma fenêtre modal est mon formulaire de connexion.
Je pensais que mettre le lien href="{{ path('security_login')}} suffirait. Sachant que href="{{ path('security_login')}} fonctionne bien.
Voici l'appel de la modal.
{% if is_granted('ROLE_ADMIN') == false %}
<a class="btn btn-primary" data-toggle="modal" data-target="#connexion" href="{{ path('security_login')}}"> Connexion</a>
<!-- Modal -->
<div class="modal fade" id="connexion">
<div class="modal-dialog">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endif %}Et voici ce que j'ai dans ma modal.
{% if error %}
<div class="alert alert-danger">
{{ error.messageKey }}
</div>
{% endif %}
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Se connecter</h4>
</div>
<div class="row">
<div class="col-sm-5">
<div class="well">
<form action="{{ path('security_login') }}" method="post">
<fieldset>
<legend><i class="fa fa-lock" aria-hidden="true"></i> Connexion</legend>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="_password" class="form-control" />
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-sign-in" aria-hidden="true"></i> On entre
</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
3 réponses
Bonne réponse de @Lartak.
Si vraiment tu n'es pas à l'aide avec JS, tu peux également intégrer le code de la modal dans ton template, voir dans ton template de base si tu en as besoin sur toutes les pages ( balise {%include %} ), pour plus d'infos : https://twig.symfony.com/doc/2.x/tags/include.html
Tu pourrais regarder ça également si tu veux passer par un controller : https://symfony.com/doc/current/templating/embedding_controllers.html c'est très utile pour intégrer par exemple un snippet (nombre d'éléments à afficher dans un badge sur plusieurs pages par exemple).
Bonjour.
Ton problème n'a aucun rapport avec le Framework, c'est juste une erreur que tu fais par rapport à l'utilisation du composant modal.
Pour un fonctionnement normal, soit uniquement avec les attribut HTML, le composant va chercher un élément qui a comme valeur de l'attribut id la valeur du data-target de l'élément cliqué, il n'en a donc rien à faire que tu aies mis une valeur dans l'attribut href de l'élément cliqué.
Si tu veux que ton système fonctionne comme tu le dis, il te faut rajouter du code JavaScript et utiliser les méthodes du composants, soit : Modal - Bootstrap » Usage : Via JavaScript et plus précisément Events.
Merci beaucoup.
Effectivement la réponse la plus rapide à mettre en place pour moi et de passer par un embedding. J'ai déjà fait un controller et une page.
Pour info :
{% if is_granted('ROLE_ADMIN') == false %}
<a class="btn btn-primary" data-toggle="modal" data-target="#connexion" href="{{ path('security_login')}}"> Connexion</a>
<!-- Modal -->
<div class="modal fade" id="connexion">
<div class="modal-dialog">
<div class="modal-content">
{{ render(controller('App\\Controller\\SecurityController::login'))
}}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a href="{{ path('security_register')}}" class="btn btn-primary">S'inscrire</a>
{% endif %}Encore merci. Je vais creuser la partie event de JS.