visit our site

Symfony2: Forms and Ajax

In General Development, PHP and Symfony

by Stefan Matei on January 19, 2015

Making Ajax calls is a trivial task nowadays for any web developer, and I’m sure it’s no enigma for all of you how to do it using your favourite Javascript library or framework like jQuery, Angular, Backbone, you name it.

 

But how do we handle these requests in the backend? More specifically, how should we write our controllers to take full advantage of our preferred framework, Symfony 2 in my case, and create a great UX for our consumers (with errors displayed nicely and effortless) and a great feeling for our colleagues with whom we share the code (by using status codes and promises).

Firstly I prepare a basic controller, while trying to respect REST principles. This will prove very valuable later on in the project and your app flow will be easier to follow. A good article on that can be found here .

/Acme/DemoBundle/Controller/DemoController.php

Then I prepare my HTML:

/Acme/DemoBundle/Resources/Demo/new.html.twig

And then I build the form; It’s always a good practice to put the fields of your form in a separate file so that you can reuse them for the edit form for example.

/Acme/DemoBundle/Resources/Demo/form.html.twig

And to tie the frontend with the backend we add a little Javascript (JQuery flavoured). This code simply listens to all submits from the page, and if the submitted form has the class ajaxForm then it submits it using Ajax.

 

Thanks to the handy promises .done and .fail, and to the use of status codes in our response (400  -> Bad request, 200 -> Ok, 404 -> Not Found and so on) the script will automatically go to the right promise and will make handling the response a lot easier. Also, if an error occurs in your form (e.g. a field is invalid), then the form is re-rendered with the errors displayed.

 

/Acme/DemoBundle/Resources/public/main.js

 

Going a little further, you could put this form in a modal (easily done with bootstrap) and you can get a really nice user interface with forms in modals submitted with Ajax.

Last but not least, don’t forget to check that your routings are correct in case you didn’t do it already:

app/config/routing.yml

 

Have fun coding 🙂

32 Replies to “Symfony2: Forms and Ajax”

  1. My brother suggested I would possibly like this web site.
    He was totally right. This publish actually made my day.
    You can not imagine simply how so much time I had spent for this info!

    Thank you!

  2. Nice blog here! Also your site loads up very fast! What host are you using?

    Can I get your associate hyperlink to your host? I desire my site loaded up as quickly as yours lol

  3. Hi all,
    I’m trying to implement this in my “hybrid system” (a different framework that makes use of symfony forms), the solution works the first time I get an error, the form is re-rendered and the error shown, but when I submit the form again it seems the form.submit event is not triggered (the default event is not prevented and the action url loaded) so I miss the ajax functionality.
    Inspecting further, I noticed that when the form fails, in the console I get an error POST … 400 (bad request) which I return in the JSONResponse. Can it prevent the js to execute? How to solve it?

  4. Hi, thank you so much, I did try and change a little bit your code until I get a 500 error (seen using firebug) and the sf2 error recommand to add the following use statement “Symfony\Component\HttpFoundation\JsonResponse;” in my controller… to get a 200 success response. Hoping I will help someone, one day !

  5. Hi,

    Have you the full source of code, I get always a problem (you can access this only ajax) and when i delete it, I don’t get the result.

    Thanks for help

Leave a Reply

Your email address will not be published. Required fields are marked *

+1
Share6
Tweet
Share7
Stumble
Pin