Discussion :

[Cellophile]

Bonjour,
J'expérimente symfony, et dans le cadre d'un projet, j'ai besoin de passer des données en méthode POST dans une nouvelle fenêtre.

Lorsque ce fais ce formulaire, qui ouvre un nouvel onglet, pas de soucis, je récupère bien mes données :

Code html :

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

1
2
3
4
5
6
7
8
<form id="emprunt_{{ Emprunt.Numero }}" target='_blank' method="post" action="{{ path('EnvoiMail') }}">
        <input type="hidden" name="CodeBarre" value="{{ Emprunt.CodeBarre }}">
        <input type="hidden" name="Titre" value="{{ Emprunt.Titre }}">
        <input type="hidden" name="NomAuteur" value="{{ Emprunt.Auteur.Nom }}">
        <input type="hidden" name="DateDuPret" value="{{ Emprunt.DateDuPret }}">
        <input type="hidden" name="DateDuRetour" value="{{ Emprunt.DateDuRetour }}">
        <input type="submit" value="Envoyer mail">
        </form>

voici les données reçues lorsque je fais un dump($request) :

EditionController.php on line 56:
Symfony\Component\HttpFoundation\Request {#56 ▼
+attributes: Symfony\Component\HttpFoundation\ParameterBag {#100 ▶}
+request: Symfony\Component\HttpFoundation\InputBag {#107 ▼
#parameters: array:12 [▼
"CodeBarre" => "3370000451300"
"Titre" => "Le Cochon d'Hollywood"
"NomAuteur" => "Fraxler"
"DateDuPret" => "2021-04-01"
"DateDuRetour" => "2021-04-15"
]
}

Par contre, si je rajoute ce bout de javascript (onsubmit) pour ouvrir la page de traitement dans une nouvelle fenêtre, les données passées dans le formulaire sont perdues. La page s'ouvre bien dans une nouvelle fenêtre, mais impossible de recevoir les données :

Code html :

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

1
2
3
4
5
6
7
8
<form id="emprunt_{{ Emprunt.Numero }}" target='_blank' method="post" action="{{ path('EnvoiMail') }}" action="{{ path('EnvoiMail') }}" onsubmit="window.open(this.action, 'mail', 'height=500, width=500, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=no, status=no'); return false">
        <input type="hidden" name="CodeBarre" value="{{ Emprunt.CodeBarre }}">
        <input type="hidden" name="Titre" value="{{ Emprunt.Titre }}">
        <input type="hidden" name="NomAuteur" value="{{ Emprunt.Auteur.Nom }}">
        <input type="hidden" name="DateDuPret" value="{{ Emprunt.DateDuPret }}">
        <input type="hidden" name="DateDuRetour" value="{{ Emprunt.DateDuRetour }}">
        <input type="submit" value="Envoyer mail">
        </form>

Voilà ce qui est reçu :

EditionController.php on line 56:
Symfony\Component\HttpFoundation\Request {#56 ▼
+attributes: Symfony\Component\HttpFoundation\ParameterBag {#100 ▶}
+request: Symfony\Component\HttpFoundation\InputBag {#107 ▼
#parameters: []
}

J'ai essayé de changer tous les paramètres de onsubmit, mais je n'arrive pas à un autre résultat... Est-ce qu'il y a une explication à cela, ou une erreur de ma part ?

Merci d'avance !

[SpaceFrog]

De mémoire, il faut passer par une bidouille abominable de création de form ou d'iframe en mettant cette nouvelle fenetre en target ...
Il serait peut être plus simple de faire un ajax ?

[Cellophile]

Bonour SpaceFrog !
Merci pour votre réponse, mais je bloque toujours :
J'ai fait une requête ajax, très bien, elle fonctionne. Mais je n'arrive toujours pas à faire passer les infos dans une nouvelle fenêtre.
En gros ce que je voudrais, c'est qu'après le traitement, une fenêtre s'ouvre en me disant "le mail suivant a bien été envoyé", avec le contenu du mail.

J'ai essayé plusieurs choses pour réussir à ouvrir le nouvel onglet avec les données passées par ajax, mais je n'arrive à rien. Je pensais qu'en rajoutant cette ligne window.open('{{ path('EnvoiMail') }}');, cela marcherait, mais non, aucune donnée n'est passée.

Code :

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
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
          var ajaxPOST = function(url, data, callback, timeout) {
            var req = new XMLHttpRequest();
            req.open('POST', url);
 
            if(timeout !== null) {
              req.timeout = timeout;
          }
 
          req.addEventListener('load', function () {
            if (req.status >= 200 && req.status < 400) {
                  callback(this.responseText)
              } else {
                  console.error(req.status + " " + req.statusText);
              }
          });
          req.addEventListener('error', function () {
              console.error('La requête a recontré un problème');
          });
 
          if(timeout !== null) {
            req.addEventListener('timeout', function () {
                console.error('timeout');
            });
          }
          req.send(data);
          window.open('{{ path('EnvoiMail') }}');
        }
 
        var formData = new FormData();
        formData.append('CodeBarre', '{{ Emprunt.CodeBarre }}');
        formData.append('Titre', '{{ Emprunt.Titre }}');
        formData.append('NomAuteur', '{{ Emprunt.NomAuteur }}');
        formData.append('DateDuPret', '{{ Emprunt.DateDuPret }}');
        formData.append('DateDuRetour', '{{ Emprunt.DateDuRetour }}');
 
        </script>
 
        <a href="#" onclick="ajaxPOST('{{ path('EnvoiMail') }}', formData, function(res) {console.log(res);}); return false" >Impression de la relance</a>

J'ai lu ici qu'a priori on ne peut pas ouvrir de nouvelles fenêtres avec ajax. Est-ce vrai ? Dans ce cas, je ne comprends pas comment ajax devrait m'aider ?

[Cellophile]

Je complète en disant que c'est de la pure curiosité, je ne comprends pas pourquoi les données POST ne sont pas passées à cause de l'ouverture d'une nouvelle fenêtre.
Je sais que je peux passer les données en GET, là ça marchera, ou même de demander en traitement de recalculer le résultat affiché sur la page, mais cette fois-ci pour l'envoyer par mail.

Je voulais éviter de rechercher à nouveau toutes les informations nécessaires à l'envoi du mail alors que je viens juste de les afficher, c'est tout ! Et je n'avais pas très envie de les passer en GET, mais bon, j'ai pas le choix si ?

[mathieu]

je pense que ce que SpaceFrog proposait, c'est de ne pas ouvrir une vraie fenêtre mais d'envoyer la requête POST avec ajax et ensuite afficher la réponse dans une popup.

[SpaceFrog]

Oui sachant que les données post ne survivent pas à un window.open, l'idée était de rester dans la même fenêtre.

[Cellophile]

OK d'accord, compris !
Le truc qui ne me convient pas, c'est qu'ainsi, je ne vérifie pas que le traitement s'est bien passé avant d'ouvrir la popup, puisque je ne peux pas faire d'appel à php, si je ne me trompe pas.

Moi j'aimerais que cette popup dise que tout s'est bien passé et nous montre ce qui a été envoyé. Or si j'utilise ajax et js pour ouvrir une fenêtre, cela ne va pas ni envoyer le mail, ni vérifier qu'il a bien été envoyé.

J'ai essayé quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <script>
        function popup() {
          w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');
 
          $.ajax({
           url: "{{ path('EnvoiMail') }}",
           dataType: 'json',
           success: function(data){
               w.document.write(data);
                     }
                  });
 
          w.document.close();
        }
        </script>

Mais ça ne peut pas marcher, parce que je ne passe pas à ma page de traitement les données en POST, par cette méthode...

Ou alors je n'ai pas compris ce que vous me proposez ?

[mathieu]

ce qu'on vous proposait c'est de ne pas ouvrir une nouvelle fenêtre mais d'afficher le résultat dans une popup, c'est à dire un élément html de la même page qui se positionnera au dessus du contenu de la page.
regardez là par exemple :
https://dmouronval.developpez.com/tu...e-modale-css3/

[Cellophile]

Bonjour Mathieu !
Merci pour ta réponse, ça j'ai compris : Ouvrir une fenêtre empêche les données POST de passer (a priori personne ne sait pourquoi), et donc pour éviter ça, on ouvre un popup, une fenêtre modale, sans recharger la page. Ok.

Mon problème, c'est que j'aimerais que le contenu de cette fenêtre modale soit quelque chose du genre :
"Le mail suivant a bien été envoyé

Contenu du mail"

=> Or pour cela, il faut que la fenêtre modale puisse communiquer avec mon fichier de traitement, en php, côté serveur, ce qui n'est, si j'ai bien compris, pas possible.

Je récapitule ce que voudrais :
page 1 :
on affiche un tableau, à chaque ligne la possibilité d'envoyer un mail.
en cliquant, on contacte la page traitement.php.
Le mail envoie les informations de la ligne du tableau de page 1 au destinataire.
Une fois que le mail est envoyé, une fenêtre s'ouvre et dit à l'expéditeur que tel mail a bien été envoyé.

Actuellement, cela marche si : je passe les données en GET, si j'ouvre dans un nouvel onglet, mais pas une nouvelle fenêtre. Je ne comprends pas comment arriver à faire ce que je veux avec une fenêtre modale ! Si c'est effectivement possible, je veux bien une piste

Le lien que tu m'as donné montre comment afficher un contenu déjà présent dans la page 1, pas à communiquer avec un autre fichier de traitement en php.

Merci de votre aide en tout cas !

[mathieu]

c'est possible d'envoyer une requête ajax en POST, regardez là par exemple :
https://www.developpez.net/forums/d1...ajax-post-php/
et si vous utilisez jquery :
https://api.jquery.com/jQuery.post/

[Cellophile]

C'est bon j'ai fini par trouver !!!


Le code qui marche pour ceux que ça pourrait aider :

Code html :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
          function AjaxPOST() {
 
            var retour = document.getElementById("reponsemailenvoye");
            var EnvoiMail = document.getElementById('boutonenvoimail');
            if (EnvoiMail.checked) {
 
              var req = new XMLHttpRequest();
              req.open('POST','{{ path('EnvoiMail') }}' , true );
              req.responseType = "text";
 
 
              req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 
              var formData = JSON.stringify({
                'CodeBarre': '{{ Emprunt.CodeBarre }}',
                'Titre': '{{ Emprunt.Titre }}',
                'NomAuteur': '{{ Emprunt.NomAuteur }}',
                'DateDuPret': '{{ Emprunt.DateDuPret }}',
                'DateDuRetour': '{{ Emprunt.DateDuRetour }}'});
 
              req.send(formData);
              req.onreadystatechange = function(){
 
              retour.innerHTML = req.readyState; // pour le plaisir de comprendre comment ça marche
              if ((req.readyState === 4) && (req.status === 200)) {
                retour.innerHTML = req.responseText;
              }
            }
 
            return true;
        }
        </script>
 
        <label for="boutonenvoimail" class="lienenvoimail">Envoyer relance</label>
        <input type="checkbox" id="boutonenvoimail" onclick="AjaxPOST()">
        <div id="fenetreconfirmail">
          <div id="PopUpConfirMail">
            <label for="boutonenvoimail" class="lienretourmail">Fermer la fenêtre</label>
            <h2>Mail envoyé</h2>
            <div id="reponsemailenvoye"></div>
          </div>
        </div>

et pour le

Code CSS :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#fenetreconfirmail {
  display: none;
  position: fixed;
  top    : 0px;
  bottom : 0px;
  left   : 0px;
  right  : 0px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
 
}
 
#PopUpConfirMail{
  position: fixed;
  top: 10%;
  bottom: 20%;
  right: 30%;
  left: 30%;
  background-color: #FFFFFF;
  padding: 2%;
 
}
 
#boutonenvoimail {
  display: none;
}
 
#boutonenvoimail:checked + #fenetreconfirmail {
  display: block;
}
 
.lienenvoimail {
  cursor: pointer;
}
 
.lienretourmail {
  border: 1px solid black;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 5%;
  cursor: pointer;
}

J'en profite aussi pour dire qu'avec symfony, lorsqu'on a envoyé la requête ajax, côté controller, il faut faire attention à récupérer du json. (et pas une requete POST du style $Emprunt = $request->request->all())
quelque chose comme ça :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
     * @Route("/dossier/EnvoiMail", name="EnvoiMail")
     */
    public function EnvoiMail(Request $request, EnvoiMail $EnvoiMail): Response
    {
           $Emprunt = $request->toArray();
 
            ....traitement
 
        return $this->render('dossier/v.html.twig', [
            'controller_name' => 'EnvoiMail',
            'Mail' => $Mail
        ]);
 
    }

Merci aux conseillers.