Modal ou popup symfony

Version imprimable

Hello a tous,

J'ai un questionnaire que j'ai crée (manger.html.twig) et sur ma page profil.html.twig j'ai mon lien pour ce questionnaire ce que je veux faire c'est au lieu d’être envoyer sur cette page je veut afficher le questionnaire en popup je sais le faire sur le même fichier twig pas de soucis mais quand il s'agit d'un autre fichier je n'y arrive pas .

j'ai pu lire qu'il fallait utiliser ajax mais pas très clair pour moi de la façon de faire.

Merci a vous de m'aider

ici mon twig
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-body"> {{ render(controller('AppBundle\\Controller\\SiteController::mangerAction'))}} </div> <div class="modal-footer"></div> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div>

Salut,

tu dois faire un appel à un controller qui te renverra le contenu à mettre dans ta page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    $(document).ready(function(){
        $("#tonBouton").on("click",function(e){
           $.ajax({
        url : path('AppBundle\\Controller\\SiteController::mangerAction'),
        data: {"donnees":[]},//tes données à envoyer
        type : POST,
        success : function(data){
            $('.modal-body').html(data); // Utiliser un id serait plus précis        
}
        });
        return false;
       });
 });
</script>

et dans ton controller tu dois avoir à la fin

Code:

1
2
$donnees = $this->getRequest()->get("donnees");
return $this->render('manger.html.twig', $donnees);

Bonjour tout d'abord merci..

Donc plus besoin de mettre render controller(appbundle\controller\...etc..) dans mon twig c'est bien ça? l'action du clique feras appel a cette page qui me l'affichera dans ma div modal-body?

par contre chose que je n'ai pas dite mais le questionnaire que j'ai crée dans manger fait déjà un appel en ajax et enregistre déjà les réponses en bdd.
moi je veu juste qu'il s’affiche sur ma page profil.html.twig au clique sur le lien du questionnaire.

Alors pour être plus clair j'ai ma vue manger

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
/**
     * @Route("/manger", name="site_manger")
     */
    public function mangerAction()
    {
        $userSlpRepo = $this->getDoctrine()->getRepository(UserSlp::class);
        $surveyProgressRepo = $this->getDoctrine()->getRepository(SurveyProgress::class);
        $surveyRepo = $this->getDoctrine()->getRepository(Survey::class);
        $questionMangerRepo = $this->getDoctrine()->getRepository(Manger::class);
 
        $userSLP=$userSlpRepo->findAll();
        $surveyprogreSLP=$surveyProgressRepo->findAll();
        $surveySLP=$surveyRepo->findAll();
        $manger = $questionMangerRepo->findAll();
 
        //$données=this->getRequest....etc
 
 
 
        return $this->render('site/site_manger.html.twig', array(
            'mangers' => $manger,
            'userSLP' => $userSLP,
            'surveySLP' => $surveySLP,
            'surveyprogreSLP' => $surveyprogreSLP,
 
        //  $données-------<<----ICI---??
      )); 
 
    }

Mon twig de nouveau

Code:

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="{{ path('site_manger')}}" 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">
                <!---->
 
            </div>
            <div class="modal-footer"></div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
 
</div>

Tu as deux solutions.

1- Soit tu as besoin d une valeur qui peut être changée dans ta page profil (EX: Etes-vous a jeun ? OUI/NON ) qui influence le questionnaire que tu va afficher.

2- Soit le questionnaire est le même pour tout le monde.

Dans le cas 1,
tu fait un appel ajax ou tu passe la réponse à la question "Etes-vous a jeun ?"
tu récupère le contenu du questionnaire et tu l ajoute au DOM dans ton bloc modal
tu ajoutes un événement sur la soumission du formulaire pour qu'il appel l ajax d enregistrement
et tu affiche ton bloc modal

Dans le cas 2,
Tu fait un include de ton questionnaire dans ta page profil
lors de l appuie sur le bouton tu affiche juste la modal qui était cachée.
Code:

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" data-toggle="modal" data-target="#myModal" >U ARE WHAT YOU EAT !</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-body">  {% include 'site/site_manger.html' %} </div> <div class="modal-footer"></div> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div>
avec un truc comme ça tu dois être bon,
il faut juste ne pas oublier de passer les variables : 'mangers', 'userSLP', 'surveySLP', 'surveyprogreSLP' lors du rendu de profil.html.twig

14/05/2019, 03h39
JackSteller

hello cela fonctionne seulement aurais-tu une solution pour les conflits d'affichage?

j'ai par exemple la couleur du texte de la vue profil.html.twig (bleu) qui s’implémente sur celle de manger.html.twig..si ce n'ai pas trop demandé
14/05/2019, 05h29
JackSteller

du coup j'ai supprimer les stylesheet de la vue manger et tout mis dans la base.html.twig pour éviter les doublons et conflit c'est ok merci bonne vie a vous tous:ptdr: