Formulaire dynamique avec Ajax dans un pop-up

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Voici mon problème :

Sur la page UtilisateurBundle:Tableau:index.html.twig : Au clic sur un lien 'profil', j'affiche un pop-up avec comme contenu les informations de l'utilisateur, qui se trouve dans {{ path("profil") }} (UtilisateurBundle:Profil:index.html.twig) -> ça fonctionne

Ensuite, au clic sur le bouton 'modifier', j'affiche (toujours sur le même pop-up), le formulaire de modification, qui se trouve dans {{ path("profil_modifier") }} (UtilisateurBundle:Profil:index.html.twig -> même contenu que le profil mais avec le form ), avec dans les champs les données de l'utilisateur -> ça fonctionne

A l'enregistrement du formulaire, j'appelle le controller Profil (voir plus bas).

Au submit du formulaire, je voudrais enregistrer les informations et afficher le contenu {{ path("profil") }} (les info de l'utilisateur), toujours sur le pop-up -> ça ne fonctionne pas

Pour l'instant, les données ne s'enregistrent pas et je retourne sur la page UtilisateurBundle:Tableau:index.html.twig, pop-up fermé.

De mon avis personnel, je pense que c'est un problème de méthode (GET/POST). Mais je n'en suis pas sûre.

J'espère avoir été claire sur mon problème et j'espère vraiment que quelqu'un puisse m'aider ;)

Merci d'avance !

#Pop-up

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class='modal'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
                <div class="row">
                    <div class="col-sm-offset-11">
                        <button class='btn btn-default' data-dismiss='modal'>Fermer la fenêtre</button>
                    </div>					
                </div>
            </div>
            <div class='modal-body'>
            </div>
        </div>
    </div>
</div>

#Script JS

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
30
31
32
33
34
35
36
$('.profil').click(function (e) {
    e.preventDefault();
 
    $.ajax({
        type: 'GET',
        url: '{{ path("profil") }}',
        success: function(data) {
            $('.modal')
                .modal('show')
                .addClass('modal-profil');
            $('.modal-body')
                .empty()
                .append(data);
 
            $('.modifier').click(function (e) {
                e.preventDefault();
 
                $.ajax({
                    type: 'GET',
                    url: '{{ path("profil_modifier") }}',
                    success: function(data) {
                        $('.modal')
                            .modal('show')
                            .addClass('modal-profil');
                        $('.modal-body')
                            .empty()
                            .append(data);
                    }
                });
 
            });
 
        }
    });
 
});

#Code du controller

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
30
31
32
33
34
35
36
37
38
$em = $this->getDoctrine()->getManager();
 
        /* Récupère le formulaire */
        $form = $this->createForm(new ProfilType());
        $request = $this->getRequest();
 
        /* Valeur par défaut du champ nom */
        $form->get('nom')->setData($this->getUser()->getNom());
        /* Plus de champs[...] */
 
        /* Si le formulaire a été envoyé */
        if($request->getMethod() == 'POST') {
            $form->bind($request);
 
            /* Vérifie si le formulaire est valide */
            if($form->isValid()) {
                /* Récupère les données du formulaire */
                $data = $this->getRequest()->request->get('profil');
 
                if($data['nom'] != $this->getUser()->getNom()) {
                    $this->getUser()->setNom($data['nom']);
                }
 
                /* Plus de données du form récupérées[...] */
 
                $em->persist($this->getUser());
                $em->flush();
 
 
                /* Redirection vers le pop-up Profil */
                return $this->render('UtilisateurBundle:Profil:index.html.twig',
                    array( 'utilisateur' => $this->getUser() ));
            }
        }
 
        return $this->render('UtilisateurBundle:Profil:index.html.twig',
            array( 'utilisateur' => $this->getUser() ,
                    'form' => $form->createView() ));

29/09/2016, 13h18
MehrezLabidi

Bonjour,
on comprends pas pourquoi tu parle d'ajax et au meme temps if($request->getMethod() == 'POST') dans ton controlleur !!
c'est normal qu'il va rediriger vers le dernier return .

Si j'enlève l'ajax :

#Code du pop-up

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class='modal'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
                <div class="row">
                    <div class="col-sm-offset-11">
                        <button class='btn btn-default' data-dismiss='modal'>Fermer la fenêtre</button>
                    </div>
                </div>					
            </div>
            <div class='modal-body'>
                {{ render(controller('UtilisateurBundle:Profil:index')) }}
            </div>
        </div>
    </div>
</div>

#Code JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.a-profil').click(function (e) {
    e.preventDefault();
    $('.modal')
        .modal('show')
        .addClass('modal-profil');
});
 
$('.a-modifier').click(function (e) {
    e.preventDefault();
    $('.modal-body')
        .empty()
        .html('{{ render(controller("UtilisateurBundle:Profil:index")) }}');
});

Mais j'ai l'erreur suivante :
Uncaught SyntaxError: Invalid or unexpected token
à la ligne 12 du code JS

pour info, le test AJAX est le suivant :
Code:

1 2 if ($request->isXmlHttpRequest()) {

29/09/2016, 15h00
mlancelin

@dukoid : Quand je fais ça, les données ne s'affichent plus dans les champs

EDIT:
les données s'affichent sur une page à part, mais pas sur le pop-up

voilà ma requete ajax qui envois un formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
                    e.preventDefault();                   // on empêche l'envoi du formulaire par le navigateur
                    $.ajax({
                        type:"POST",
                        data: $(this).serialize(),        // les données du formulaire
                        url:"{{ url('vers_action_controller_req_ajx') }}",
                        cache: false,
                        success: function( msg ){
...
...
 
                        }
                    });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    /**
     * @Route("/req-ajx", name="vers_action_controller_req_ajx")
     */
    public function instanceReqAjxAction(Request $request) {

            if ($request->isXmlHttpRequest()) {

.... traitement du formulaire de façon classique ...

  $reponse = tu envois la reponse que tu veux sous un format String


$reponse =  tu peux aussi utiliser une commande PHP pour recuperer le contenu HTML d'un render...    google est ton ami


                $response = new Response( $reponse );
                $response->headers->set('Content-Type', 'application/json');
                return $response;

remarque : c'est dans le controller que tu dois rendre la page profil dans une variable que tu passes ensuite à la vue

29/09/2016, 15h44
mlancelin
J'ai plusieurs questions :

- Une fois dans la fonction, de quelle manière je récupère mes données ?
Code:

1 2 3 4 public function modifierAjaxAction(Request $request) { if ($request->isXmlHttpRequest()) { } }
29/09/2016, 16h38
dukoid

comme n'importe quel formulaire symfony

je suppose que tu as envoyé une formulaire à la vue qui le renvois en ajax au controleur.

#Code Ajax :

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
30
31
32
33
34
35
36
37
38
39
40
//Affichage du pop-up avec les informations de l'utilisateur
$('.a-profil').click(function (e) {
    e.preventDefault();
        $('.modal')
            .modal('show')
            .addClass('modal-profil');
});
 
// Affichage du formulaire sur le pop-up
$('.a-modifier').click(function (e) {
    e.preventDefault();
 
    $.ajax({
        type: 'GET',
        url: '{{ path("profil_modifier") }}',
	success: function(data) {
            $('.modal-body')
                .empty()
                .append(data);			
        }
    });
});
 
// Modification des informations sur le pop-up et retour sur le pop-up
$('.a-enregistrer').click(function (e) {
    e.preventDefault();
 
    $.ajax({
        type:"POST",
        data: $(this).serialize(),
        url:"{{ url('profil_modifier_ajax') }}",
        cache: false,
        success: function(data){
            $('.modal-body')
                .empty()
                .append(data);
        }
    });
 
});

#Controller :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public function modifierAjaxAction(Request $request) {
    $em = $this->getDoctrine()->getManager();
 
    if ($request->isXmlHttpRequest()) {
        /* Récupère les données du formulaire */
        $data = $this->getRequest()->request->get('profil');
 
        if($data['prenom'] != $this->getUser()->getPrenom()) {
            $this->getUser()->setPrenom($data['prenom']);
        }
 
        $em->persist($this->getUser());
        $em->flush();
 
 
        $response = new Response($this->router->generate('profil'));
        $response->headers->set('Content-Type', 'application/json');
        return $response;
    }
}

L'enregistrement ne fonctionne pas et j'ai une erreur :

Code:

Le jeton CSRF est invalide. Veuillez renvoyer le formulaire.

29/09/2016, 17h53
dukoid

c'est une sécurité.

quand on crée un formulaire via Symfony il ajoute un champ hidden avec un code CSRF

il s'attend en retour recuperer ce champs avec le meme code.

je ne vois pas ton formulaire Symfony, ou est il ?
29/09/2016, 18h04
mlancelin

1 pièce(s) jointe(s)

L'erreur du token est pour un autre formulaire.

Sur ma page j'ai un formulaire 'todo' et un formulaire 'profil' sur 'UtilisateurBundle:Profil:index.html.twig'.

Je veux récupérer les données du formulaire 'profil', donc dans le code ajax j'ai mis :

Code:

data: $('form[name=profil]').serialize(),

mais pourtant j'ai toujours l'erreur :

Pièce jointe 221504
29/09/2016, 18h21
MehrezLabidi

on voit pas ton formulaire , elle est ou ??
on veux la form dans twig

Voici le code de mon formulaire dans Profil:index.html.twig, qui est appelé dans Tableau:index.html.twig :

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
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
<!-- Affichage du formulaire si l'utilisateur veut modifier les informations -->
{% if form is defined %}
    {{ form_start(form, { 'attr': { 'class': 'form-horizontal'} }) }}
{% endif %}
 
<div class="row">
 
    <!-- Informations de l'utilisateur -->
    <div class="col-sm-10 col-informations">
 
        <div class="row">
            <div class="col-sm-4">
                <p>
                    <img src="{{ asset('picto/noir/nom.png') }}">&nbsp;<span class="span-label">Nom :</span> 
                    {% if form is defined %}
                        {{ form_widget(form.nom) }}
                    {% else %}
                        {{ utilisateur.nom }}
                    {% endif %}
                </p>
            </div>
            <div class="col-sm-4">
                <p>
                    <img src="{{ asset('picto/noir/nom.png') }}">&nbsp;<span class="span-label">Prénom :</span> 
                    {% if form is defined %}
                        {{ form_widget(form.prenom) }}
                    {% else %}
                        {{ utilisateur.prenom }}
                    {% endif %}
                </p>
            </div>
            <div class="col-sm-4">
                <p>
                    <img src="{{ asset('picto/noir/email.png') }}">&nbsp;<span class="span-label">Fonction :</span> 
                    {% if form is defined %}
                        {{ form_widget(form.fonctions) }}
                    {% else %}
                        {{ utilisateur.fonction.libelle }}
                    {% endif %}                    
                </p>
            </div>
        </div> 
 
    </div>      
 
<!-- .row -->
</div>
 
<div class="row">
    <div class="col-sm-offset-9">
        {% if form is defined %}
            {{ form_widget(form._token) }}
            <button type="submit" class="btn btn-default a-enregistrer">Enregistrer</button>
        {% else %}
            <a class="btn btn-default a-modifier">Modifier</a>
        {% endif %}
    </div>
</div>
 
{% if form is defined %}
    {{ form_end(form) }}
{% endif %}

29/09/2016, 19h00
MehrezLabidi
trés bien , le render rest false c'est juste pour ne pas afficher des widgets que tu n'a pas demandé explicitement dans twig alors que c'est dans formType ;)
Code:

1 2 3 4 5 {% if form is defined %} {{ form_widget(form._token) }} {{ form_end(form, {'render_rest': false}) }} {% endif %}
29/09/2016, 19h02
mlancelin

Pas de changement , toujours la même erreur
29/09/2016, 19h32
dukoid

avec firebug ou en affichant le code source de la page

regarde le form en question et regarde la presence ou non du champs : hidden CRSF (ce champs contient bien le token ?)

c'est possible de voir la creation du formulaire dans le controller ?

L'erreur s'affiche dans le profiler de Symfony

#Champ avec le token :

Code:

<input type="hidden" id="profil__token" name="profil[_token]" value="Dkt8g9lOafReCLcEWnlGWOF_dAf5FwxOKqJDShJoMkc">

#Création du formulaire dans ProfilController:modifierAction() :

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
30
31
32
33
34
35
36
37
38
$em = $this->getDoctrine()->getManager();
 
        /* Récupère le formulaire */
        $form = $this->createForm(new ProfilType());
        $request = $this->getRequest();
 
        /* Valeur par défaut du champ nom */
        $form->get('nom')->setData($this->getUser()->getNom());
        /* Plus de champs[...] */
 
        /* Si le formulaire a été envoyé */
        if($request->getMethod() == 'POST') {
            $form->bind($request);
 
            /* Vérifie si le formulaire est valide */
            if($form->isValid()) {
                /* Récupère les données du formulaire */
                $data = $this->getRequest()->request->get('profil');
 
                if($data['nom'] != $this->getUser()->getNom()) {
                    $this->getUser()->setNom($data['nom']);
                }
 
                /* Plus de données du form récupérées[...] */
 
                $em->persist($this->getUser());
                $em->flush();
 
 
                /* Redirection vers le pop-up Profil */
                return $this->render('UtilisateurBundle:Profil:index.html.twig',
                    array( 'utilisateur' => $this->getUser() ));
            }
        }
 
        return $this->render('UtilisateurBundle:Profil:index.html.twig',
            array( 'utilisateur' => $this->getUser() ,
                    'form' => $form->createView() ));

EDIT:

J'ai déplacé l'ajax de mon formulaire dans le success de mon bouton modifier car, placé à l'extérieur, le clic sur le bouton enregistré n'était pas reconnu.
#Code Ajax

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
30
31
32
$('.a-modifier').click(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'GET',
        url: '{{ path("profil_modifier") }}',
        success: function(data) {
            $('.modal-body')
                .empty()
                .append(data);
 
            $('.a-enregistrer').click(function (e) {
                e.preventDefault();
                $.ajax({
                    type:"POST",
                    data: $('form[name=profil]').serialize(),
                    url:"{{ url('profil_modifier_ajax') }}",
                    cache: false,
                    success: function(data){
                        $('.modal')
                            .modal('show');
                        $('.modal-body')
                            .empty()
                            .append(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }
                });
            });							
        }
    });
});

Maintenant, j'ai une nouvelle erreur :

Code:

The controller must return a response (null given). Did you forget to add a return statement somewhere in your controller?

Donc le problème vient maintenant de la méthode modifierAjaxAction, qui return null :

Code:

1
2
3
$response = new Response($this->router->generate('profil'));
$response->headers->set('Content-Type', 'application/json');
return $response;

Et bonne nouvelle l'enregistrement des données fonctionne !

dans le controller :

Code:

1
2
 
dump( $this->router->generate('profil') ); exit;

Code:

Notice: Undefined property: UtilisateurBundle\Controller\ProfilController::$router

EDIT :
J'ai modifié par :
Code:

1 2 3 $response = new Response($this->render('UtilisateurBundle:Profil:index.html.twig', array( 'utilisateur' => $this->getUser() ))); $response->headers->set('Content-Type', 'application/json'); return $response;
Mais j'ai cette erreur :

Code:

parsererror SyntaxError: Unexpected token H in JSON at position 0(…)

J'ai trouvé !!!

Code:

1
2
3
$response = new Response($this->render('UtilisateurBundle:Profil:index.html.twig', array( 'utilisateur' => $this->getUser() )));
$response->headers->set('Content-Type', 'text/html');
return $response;

Le souci est que j'ai ce truc qui s'affiche avant mon twig :

Code:

1
2
3
4
<div class="modal-body">
    HTTP/1.0 200 OK Cache-Control: no-cache
    [...]twig 
</div>

EDIT :
La méthode render affiche la vue + le header. Pour ne pas afficher le header :

Code:

1
2
3
$response = new Response($this->renderView('UtilisateurBundle:Profil:index.html.twig', array( 'utilisateur' => $this->getUser() )));
$response->headers->set('Content-Type', 'text/html');
return $response;

Merci pour ton aide, dukoid !!

Voir 40 message(s) de cette discussion en une page