PHP

[Symfony 3.x] Formulaire dans une popup en include

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Symfony 3.x] Formulaire dans une popup en include

mecano31

Bonjour à tous,

J'ai un souci d'affichage de mon formulaire dans une popup. Ma vue du formulaire est un fichier : add.html.twig qui lui même est inclut dans un template parent.
Quand je clique pour afficher ma popup, j'ai les erreurs suivantes : "Variable 'form' does not exist." et "Variable 'entity' does not exist". Les 2 vues n'ont pas le même controller.
Je n'arrive pas à accéder à mon formulaire via le fichier d'include. J'ai essayé de faire un : {{ rendre(contrôler('AppBundle:Form:add', {} )}} dans le template mais toujours rien.
J'affiche bien mon formulaire sans include() et mon controller s'exécute bien. Je ne vois pas d'où vient le problème à part qu'il me dit les variables 'form' et 'entity' n'existent. Hors ces 2 variables existent belle et bien mais ils ne sont pas accessibles en include. Merci par avance pour votre aide !

Code :

// layout.html.twig
{% block body %}
{% include '/form.html.twig' %}
<div>
<h1>{{ entity.name }}</h1>
<p>{{ entity.description }}</p>
<a href="#" id="popup">Afficher popup</a>
</div>
{% endblock %}
{% block javascripts %}
<script>
$(function () {
$('#popup').on('click', function(){
// affiche la popup
});
});
</script>
{% endblock %}

Code :

// add.html.twig
{% block body %}
<div>
<h3>Formulaire</h3>
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_widget(form.title) }}
{{ form_widget(form.body) }}
<input type="submit" value="Valider">
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
{% endblock %}

Code :

// FormController.php
class FormController extend Controller
{
public function addAction(Request $request, $id)
{
$entity = new Entity();
$form = $this->createForm(FormType::class, $entity);
if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($entity);
$em->flush();
$request->getSession()->getFlashBag()->add('notice', 'Success');
return $this->redirectToRoute('form_view', array('id' => $entity->getId()));
}
return $this->render('AppBundle:Form:add.html.twig', array(
'form' => $form->createView(),
));
}
}

Publicité

MaybeEijOrNot

but someone at least

Bonjour,

Je ne connais pas Symfony mais normalement le mot-clé pour étendre une classe c'est "extends" et non "extend". Cela devrait te retourner une erreur, en fonction de comment est paramétré ton gestionnaire d'erreurs... Donc avant d'aller plus loin il faudrait s'assurer que le problème ne vienne pas de là.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Bonjour @MaybeEijOrNot,

Merci d'avoir pris le temps de me répondre. Il s'agit bien d'une erreur lors du copier-coller au niveau du "mot-clé pour étendre ma classe avec 'extends' et non 'extend'".
J'arrive bien à afficher ma popup maintenant. Mais j'ai un autre souci lors de la validation de mon formulaire en Ajax. J'aimerais quand je valide le formulaire qu'il m'affiche un message de success sur la popup sans recharger la page. Mes données sont bien enregistrés en base de données mais la page se recharge automatiquement pour afficher le message de validation (comportement non souhaiter). Je n'arrive pas à bloquer le rechargement de la page ou même à afficher le message sur la popup pendant quelques secondes et puis la faire disparaître après. Merci !

Un exemple du code :

Code :

$('#btn-popup').click(function () {
var route = Routing.generate('affiche_popup');
$.ajax({
url: route
})
.done(function(data){
console.log(data);
if (typeof data !== 'undefined') {
$('#form-container').html(data);
$('body').css({'overflow-y': 'hidden'});
$('.popup-body').css({'overflow-y': 'auto'});
$('.popup-body').fadeIn();
}
})
.fail(function (err) {
alert(err.statusText);
});
});
$('form').submit(function(e) {
e.preventDefault();
var $form = $(this);
var type = $form.attr('method');
var route = $form.attr('action');
var datas = $form.serialize();
$.post({
type: type,
url: route,
data: datas,
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});
});

Code :

// FormController.php
class FormController extends Controller
{
public function addAction(Request $request, $id)
{
$entity = new Entity();
$form = $this->createForm(FormType::class, $entity, array(
'action' => $this->generateUrl('form_treatment', array('id' => $id)),
'method' => 'POST'
));
if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($entity);
$em->flush();
$response = new JsonResponse();
$response->setData(array(
'formSuccess' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'successMessage' => 'Formulaire validé avec success'
));
return $response;
} else {
$response = new JsonResponse();
$response->setData(array(
'formErrors' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'errorMessage' => 'Echec de validation'
));
return $response;
}
}
}

MaybeEijOrNot

but someone at least

Bonjour,

La partie JQuery fait apparaître deux requêtes Ajax différentes, laquelle ne va pas ? (a priori la première)
Quel est le HTML (généré) correspondant à ces éléments ?

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Re,

La première requête Ajax permet d'afficher ma popup. Cette dernière s'affiche bien avec mon formulaire. Et la deuxième permet de traiter la validation du formulaire. C'est celle-ci qui me pose problème. Car je valide le formulaire j'enregistre bien mes données en base mais je n'arrive pas à faire en sorte de garder la popup ouvert (sans recharger la page) pour afficher une alerte (success ou échec).

Cdlt,

MaybeEijOrNot

but someone at least

Et tu récupères quelque chose dans la console ici :

Code :

console.log(result);

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Le resultat de console.log(result) me renvoie ce : "Formulaire validé avec success" quand je valide le formulaire.

Message édité par mecano31 le 18-05-2018 à 10:39:58

MaybeEijOrNot

but someone at least

Et tu n'as aucune erreur dans la console ?
Et si tu essayes d'attacher une id à l'élément form et de le sélectionner par son id plutôt que de sélectionner tous les éléments form ?

Sinon je veux bien voir le HTML généré car le preventDefault() devrait interrompre l'évènement submit donc il doit y avoir une subtilité cachée.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

MaybeEijOrNot

but someone at least

Au passage,

Code :

$('form').submit(function(e) {
e.preventDefault();
var $form = $(this);
var type = $form.attr('method');
var route = $form.attr('action');
var datas = $form.serialize();
$.post({
type: type,
url: route,
data: datas,
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});
});

Pas la peine de mettre le type de requête si tu utilises $.post puisque c'est un alias de $.ajax pour le type post...

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Ok c'est noté. J'ai enlevé le type dans le code.
Je n'ai aucune erreur dans la console.

Voici le html de mon formulaire:

Code :

// form.html.twig
{% block body %}
<div>
<h3>Formulaire</h3>
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_widget(form.title) }}
{{ form_widget(form.body) }}
<input type="submit" value="Valider">
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
{% endblock %}

et voici le corps de la popup dans lequel je viens injecter mon formulaire grâce au :

Code :

$('#form-container').html(data);

Code :

// popup.html.twig
<div class="popup-body">
.....................
<div id="form-container"></div>
</div>

Le formulaire et le corps de la popup sont dans deux fichiers distincts : form.html.twig et popup.html.twig. Je récupère l'url du formulaire à l'aide de :

Code :

var route = Routing.generate('affiche_popup');

qui est passé en ajax et me permet d'inclure mon formulaire dans le body de la popup et afficher le tout en même temps :

Code :

$.ajax({
url: route
})
.done(function(data){
console.log(data);
if (typeof data !== 'undefined') {
$('#form-container').html(data);
$('body').css({'overflow-y': 'hidden'});
$('.popup-body').css({'overflow-y': 'auto'});
$('.popup-body').fadeIn();
}
});

Résultat de la console : {"formSuccess":{"headers":{}},"successMessage":"Formulaire validé avec success"}

Message édité par mecano31 le 18-05-2018 à 12:15:36

Publicité

MaybeEijOrNot

but someone at least

Quand je dis le HTML généré je parle plus du code source de la page à minima ou alors carrément le code interprété quand du contenu dynamique est chargé.

Mais bon je pense avoir compris le problème quand même. Ce que tu as dans ta console c'est juste le message disant que tu as généré avec succès ton popup et non que les données du formulaire ont bien été envoyées. Les données de ton formulaire sont bien envoyées mais pas en ajax. En fait tu ajoutes une écoute de l'évènement "submit" :

Code :

$('form').submit(function(e) {
e.preventDefault();
var $form = $(this);
var type = $form.attr('method');
var route = $form.attr('action');
var datas = $form.serialize();
$.post({
type: type,
url: route,
data: datas,
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});
});

Avant d'avoir généré ton popup, l'évènement n'est donc attaché à aucun formulaire.
Il faut en fait placé ce code dans le If suivant :

Code :

if (typeof data !== 'undefined') {
$('#form-container').html(data);
$('body').css({'overflow-y': 'hidden'});
$('.popup-body').css({'overflow-y': 'auto'});
$('.popup-body').fadeIn();
}

Ainsi l'évènement "submit" ne sera attaché à l'élément "form" qu'une fois ce dernier créé.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Désolé pour l'avant dernier message.
Ça marche maintenant.

Merci beaucoup !

Cdlt,

Message édité par mecano31 le 18-05-2018 à 15:28:09

mecano31

Bonjour @MaybeEijOrNot,

Je confirme ce que tu avais dit dans ton précédent post "Les données de ton formulaire sont bien envoyées mais pas en ajax."
Du coup j'ai du modifié ma requête ajax mais jusqu'à présent je ne vois pas mon message.

Code :

if (typeof data !== 'undefined') {
$('#form-container').html(data);
$('body').css({'overflow-y': 'hidden'});
$('.popup-body').css({'overflow-y': 'auto'});
$('.popup-body').fadeIn();
$('form').submit(function(e) {
e.preventDefault();
var $form = $(this);
var route = $form.attr('action');
$.post({
url: route,
data: new FormData($form[0]),
processData: false,
contentType: false,
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});
});
}

MaybeEijOrNot

but someone at least

Et donc maintenant les données sont envoyées en Ajax ?
Le rechargement de la page est bien annulé ?

C'est pour savoir s'il n'y a que le message qui déconne ou si c'est encore toute la requête.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Les données ne sont pas envoyées en Ajax. C'est ça qui déconne je pense.
Mais le rechargement de la page est bien annulé.

MaybeEijOrNot

but someone at least

Les données sont envoyées, pas en Ajax et il n'y a pas de rechargement de la page ? o_O
C'est quoi le code HTML de la balise form ?

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

C'est une simple vue twig : j'ai préféré illustrer mon code avec un petit exemple du code suivant pour être plus claire car il y a beaucoup de contenus dans mon code qui serait un peu compliqué d'exposer ici et aussi pour faciliter la compréhension. C'est juste un formulaire pour poser une question sur un article avec comme champs : le pseudo de l'utilisateur, le titre et le corps de la question.

Code :

{% block body %}
<div>
<h3>Formulaire</h3>
{{ form_start(form) }}
{{ form_widget(form.pseudo) }}
{{ form_widget(form.title) }}
{{ form_widget(form.body) }}
<button type="submit">Envoyer ma question</button>
{{ form_end(form) }}
</div>
{% endblock %}

Voici à quoi ressemble le code source :

Code :

<form name="appbundle_question" method="post" action="/fr-FR/question_treatment?ref=100" id="questionPopup">
<label>Mon pseudo</label>
<input id="appbundle_question_pseudo" name="appbundle_question[pseudo]" required="required" value="" type="text">
<label>Titre</label>
<input id="appbundle_question_titre" name="appbundle_question[questionTitre]" required="required" placeholder="Titre de ma question" type="text">
<label>Description</label>
<textarea id="appbundle_question_questionBody" name="appbundle_question[questionBody]" required="required" placeholder="Ma question..." rows="8"></textarea>
<button type="submit">Envoyer ma question</button>
</form>

MaybeEijOrNot

but someone at least

Je ne connais pas trop jQuery mais ta sélection $('form') retourne une collection, je suppose qu'en suite jQuery traite ça avec un forEach. Mais peut-être que ça pose problème, peux-tu me dire ce qu'il en est si tu sélectionnes uniquement ton formulaire :

Code :

$('form[name="appbundle_question"]').submit(function(e) {
e.preventDefault();
var $form = $(this);
var route = $form.attr('action');
$.post({
url: route,
data: new FormData($form[0]),
processData: false,
contentType: false,
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});

Et je ne comprends toujours pas si des données sont envoyées ou non actuellement.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

J'ai bien ciblé mon formulaire avec l'Id mais c'est toujours le même résultat :

Code :

$('#questionPopup').submit(function(e) {}

Mes données sont envoyées car je les enregistre dans ma base de données. Mais elles ne sont pas envoyées en Ajax.
Je crains si le problème ne vient pas de mon controller :

Code :

class QuestionController extends Controller
{
public function newAction(Request $request, $ref)
{
$question = new Question();
$form = $this->createForm(FormQuestionType::class, $question , array(
'action' => $this->generateUrl('question_treatment', array('ref' => $ref)),
'method' => 'POST'
));
if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($question);
$em->flush();
$response = new JsonResponse();
$response->setData(array(
'formSuccess' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'successMessage' => 'Formulaire validé avec success'
));
return $response;
} else {
$response = new JsonResponse();
$response->setData(array(
'formErrors' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'errorMessage' => 'Echec de validation'
));
return $response;
}
}
}

Message édité par mecano31 le 22-05-2018 à 16:49:56

MaybeEijOrNot

but someone at least

Comment sais-tu que ta requête n'est pas envoyée en Ajax ? Parce que là, normalement, si il n'y a pas de rechargement de la page c'est que l'évènement a bien été interceptée. Donc à moins qu'une autre partie du JS intercepte l'évènement (ce qui est très peu probable) je ne vois pas comment il pourrait passer ailleurs.

Que dit ta console dans la partie réseau ? Dans l'en-tête de la requête (pas de la réponse) tu retrouves :

Code :

Content-Type : application/x-www-form-urlencoded

Code :

Content-Type : multipart/form-data

?

Et je ne vois pas trop comment la problème pourrait venir de ton controller, je ne connais pas Symfony mais là tu n'as que la création de ton pop-up/formulaire. Et pour l'instant il semble formé correctement.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Dans l'entête de la requête je trouve ceci:

Content-Type:
multipart/form-data; boundary=…----------------8531910721294

MaybeEijOrNot

but someone at least

Du coup cela semble bien passer par la requête Ajax car chez moi une requête gérée par le formulaire passe avec l'entête : "Content-Type : application/x-www-form-urlencoded". Donc ce serait plus l'affichage de la réponse qui déconnerait. Par contre, de^puis que tu as changé le code, que retourne ton console.log(result) ?

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Bonjour @MaybeEijOrNot,

Désolé pour le retard je travaillais sur un autre sujet.
En fait, je n'arrive pas à afficher mon message d'erreur.

Cdlt,

MaybeEijOrNot

but someone at least

Et elle est où la partie PHP qui gère cette requête POST ?
Parce que, pour moi, le PHP que tu as mis c'est juste pour générer la pop-up avec le formulaire.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mecano31

Hello,

Voici la partie qui traite le formulaire :

Code :

class QuestionController extends Controller
{
public function newAction(Request $request, $ref)
{
$question = new Question();
$form = $this->createForm(FormQuestionType::class, $question , array(
'action' => $this->generateUrl('question_treatment', array('ref' => $ref)),
'method' => 'POST'
));
if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($question);
$em->flush();
$response = new JsonResponse();
$response->setData(array(
'formSuccess' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'successMessage' => 'Formulaire validé avec success'
));
return $response;
} else {
$response = new JsonResponse();
$response->setData(array(
'formErrors' => $this->render('modules/form.html.twig', array(
'form' => $form->createView())
),
'errorMessage' => 'Echec de validation'
));
return $response;
}
}
}

MaybeEijOrNot

but someone at least

Donc si je comprends bien, c'est le même controller qui permet de gérer la requête pour afficher le pop-up du formulaire et gérer la requête du formulaire ?

Si je résume, tout semble indiquer que ta requête Ajax part bien puisque il n'y a pas rechargement de la page et dans la console réseau tu retrouves bien une requête POST avec un content-type "multipart/form-data".
D'après toi, ces données arrivent bien sur ton serveur et sont traitées car elles sont ajoutées à la base de données. (tu as bien vérifié que ce n'était pas un ancien jeu de données qui était déjà dans la base de données par hasard ?)
Et d'après ton controller, que la requête soit bonne ou non, une réponse est envoyée.

Mais toi de ton côté tu ne reçois aucune réponse.

Là il y a un truc qui nous échappe...

Juste une petite idée, ta réponse étant du json, tu peux préciser dans ta requête ajax que tu attends une réponse en json :

Code :

$.post({
url: route,
data: new FormData($form[0]),
processData: false,
contentType: false,
dataType: 'json',
success: function(result) {
console.log(result);
$('.formMessage').addClass('success').html(result);
},
error: function(err){
$('.formMessage').addClass('success').html(err);
}
});

Mais je ne pense pas que ça puisse bloquer là.

Sinon je suis à court d'idées, faut essayer de fouiller dans ta console réseau voir que tout colle. Essaye de voir que ta requête va bien à la bonne adresse, une fois ta requête sélectionnée dans la console, regarde dans l'onglet "Paramètres" que tout correspond, regarde si dans l'onglet "Réponse" tu as une réponse ou non.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Publicité

FORUM HardWare.fr

Programmation

PHP

[Symfony 3.x] Formulaire dans une popup en include

Sujets relatifs
Formulaire (de merde)	Excel 2016 - Inscription données saisie par formulaire
Javascript et formulaire pdf	Symfony 4: config Swift Mailer & SMTP...
Contrôle formulaire : alert suivant oublis de l'utilisateur	Formulaire de contact php
lien vers formulaire qui bloque que sur 4/17 pages ????	[VB /VBA /VBS] Remplir un formulaire HTML a partir d'un word
Formulaire d'envoi de fichier	Word 2016 : Formulaire, insertions automatiques, Macro... ?
Plus de sujets relatifs à : [Symfony 3.x] Formulaire dans une popup en include

Page générée en 0.208 secondes