Ajax et Symfony 2
Faire de l’ajax avec Symfony2 n’a rien de bien compliqué mais il existe autant de façon que de développeurs. Je vous présente un technique simple et efficace.
Front- end : un peu de javascript
Je vous épargne la vue twig qui n’a rien de spéciale à part éventuellement un id ou une class pour identifier le formulaire.
La fonction javascript (à mettre dans un fichier à part et pas au milieu de la page …) permet de récupérer l’intégralité d’un formulaire grâce à : data: new FormData( $this[0] ). L’url d’envoi est directement récupérée dans l’action du formulaire ce qui évite d’utiliser FosJsrouting par exemple. Ne reste plus qu’à traiter le retour Json du contrôlleur.
//selector = id ou class du formulaire
function ajaxForm(selector) {
//quand le formulaire est soumi
$(selector).submit( function(event) {
// Eviter le comportement par défaut (soumettre le formulaire)
event.preventDefault();
var $this = $(this);
//Ici on peut ajouter un loader...
$.ajax({
url: $this.attr('action'),
type: $this.attr('method'),
data: new FormData( $this[0] ),
processData: false,
contentType: false,
statusCode: {
//traitement en cas de succès
200: function(response) {
var successMessage = response.successMessage ;
//on vide les champs formulaires ou on le supprime ou ...
$(selector).trigger("reset");
//on retire le loader...
//on prévient l'utilistateur du bonne envoi...
},
//traitement en cas d'erreur (on peut aussi traiter le cas erreur 500...)
412: function(response) {
var errorsForm = response.responseJSON.formErrors ;
//on affiche les erreurs...
});
}
}
});
});
}
Le contrôlleur Symfony
Je ne vous met pas le routing. N’oubliez pas de définir la méthode à POST. Le retour se fait au format Json on peut envoyer une vue un message ou des données…on récupère en front ces données grâce à response.responseJSON.<index> .
public function ajaxFormAction(Request $request) {
$formService = $this->getFormService();
//création du formulaire
$myFormObject = new myFormObject();
$myEntityForm = $this->createForm(new myEntityType, $myFormObject);
$myEntityForm->handleRequest($request);
if ($myEntityForm->isValid()) {
//do your stuff ...
$formService->jetraitemonform($form->getData());
//envoi des données JSON en front
$response = new JsonResponse();
$response->setStatusCode(200);
//ajout de données éventuelles
$response->setData(array(
'successMessage' => "Votre message a bien été envoyé"));
return $response;
} else {
//form non valide
//envoi des données d'erreurs JSON en front
$response = new JsonResponse();
$response->setStatusCode(412);
$response->setData(array(
'formErrors' => $this->renderView('AcmeBundle:MyViews:_form.contact.fields.html.twig',
array('form' => $myEntityForm->createView() )
),
'myMessage' => $myMessage
));
return $response;
}
}
Voilà ce petit tuto est fini. N’hésitez à me faire des remarques. Je metterai bientôt un article en ligne avec une utilisation concrète et l’utilisation du nouveau captcha google.
