Blog d'un passionné du web (Symfony2, HTML5, Sass, Gulp…)

Mon site freelance
Mon Facebook - Mon Twitter

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.

9 juillet 2015


Previous Post

Next Post