How to implement a CollectionType Form field with AJAX "add new" embedded form with re-usable markup using Symfony2 and Twitter Bootstrap

I wanted to create a re-usable piece of code that makes me able to "add new" input field and makes the relationship with the other entity.

I did only find some very specific (and not re-usable) examples, so I gave my try on this question. Hope you find it usefull.

Here is how I did it, in some generic manner.

In generic, I mean, Any collection that I add to the form just need to follow the Form template loop (in a macro, for example) and that's all!

Using which convention

• HTML is from Twitter Bootstrap 2.0.x
• Javascript code is already in a $(document).ready();
• Following Symfony 2.0.x tutorial
• Using MopaBootstrapBundle

Form Type class

The form template

Trick here is that I would have had used the original {{ form_widget(form }} but I needed to add some specific to the view form and I could not make it shorter.

And I tried to edit only the targeted field and found out it was a bit complex

My notes on Snipt.net

I created a Snipt to use on my Sublime Text 2 editor installation. In case you want to use it:

References

I wrote a complete answer, hoping to add some value on StackOverflow, here is some other paths I read about it.

• My Answer to the question that triggered my research on StackOverflow
• AcmePizzaBundle, very helpful!
• Symfony2 Reference