Symfony2 multiple forms in different JQuery UI tabs but single page - php

Question

I'm facing a problem that I can summarize as it follows:
I have a TWIG template page like this (reg.html.twig):
{% extends "::base.html.twig" %}
{% block body %}
<ul class="tabs">
<li class="left">tab1</li>
<li class="left">tab2</li>
<li class="left">tab3</li>
<li class="right">tab4</li>
</ul>
<div class="tabs_container">
<div id="tab1" class="blocco-tab">
<form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}>
<div id="name_field">
{{ form_row(form.name) }}
</div><!-- /name_field -->
<div id="address">
{{ form_row(form.addresses[0].road) }}
</div><!-- /address_field -->
</form>
</div>
<div id="tab2" class="blocco-tab">
<form action="{{ path('BBB') }}" method="post" {{ form_enctype(form) }}>
<div id="surname_field">
{{ form_row(form.surname) }}
</div><!-- /surname_field -->
</form>
</div>
</div> <!-- contenitore_tabs -->
{% endblock %}
Fields name, surname and addresses belong to a sample Symfony2 entity Person.
addresses is the first and only element of a collection of addresses (I need this as collection for other reasons)
The working JS file is:
jQuery(document).ready(function() {
$(".blocco-tab").hide();
$("ul.tabs li:first").addClass("active").show();
$(".blocco-tab:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".blocco-tab").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
The Entity file:
class Person {
protected $name;
protected $surname;
protected $addresses;
public function __construct(){
$this->addresses = new ArrayCollection();
}
}
And in the DefaultController:
public function tab1Action(Request $request){
$person = new Person();
$address = new Address();
$addr_coll = new ArrayCollection();
$addr_coll->add($address);
$tab1_type = new Tab1Type();
$person->setAddresses($addr_coll);
$form = $this->createForm($tab1_type, $person);
if ($request->getMethod() == 'POST')
{
$form->bindRequest($request);
if ($form->isValid())
/*ecc ecc ecc*/
}
public function tab2Action(Request $request){
$person = new Person();
$tab2_type = new Tab2Type();
$form = $this->createForm($tab2_type, $person);
if ($request->getMethod() == 'POST')
{
$form->bindRequest($request);
if ($form->isValid())
/*ecc ecc ecc*/
}
Actually I took the way of having every FormType having all fields that I don't need rendered but put 'hidden' and 'property_path' => false, because I can't render only my desired fields cause the other ones will cause errors at runtime (they're null) , but I still get problems handling both cases in a joined way.
Putting every form in a different page (== different Route), with different Controllers, everything works fine, so it's not a problem related to basic use of symfony, It's the integration of N forms in a single page with JQuery UI that makes me cry.
Fixed that I have to use this tabs, how can I solve?
Do I have to make a single Action handling everything?
Do I have to make a single form?
Do I miss something?
Thanks in advance, I hope I've been clear in explaining my issue.

Answer 1

You just used the same variable for different forms
<div id="tab1" class="blocco-tab">
<form action="{{ path('AAA') }}" method="post" {{ form_enctype(**form1**) }}>
<div id="name_field">
{{ form_row(**form1**.name) }}
</div><!-- /name_field -->
<div id="address">
{{ form_row(**form1**.addresses[0].road) }}
</div><!-- /address_field -->
</form>
</div>
<div id="tab2" class="blocco-tab">
<form action="{{ path('BBB') }}" method="post" {{ form_enctype(**form2**) }}>
<div id="surname_field">
{{ form_row(**form2**.surname) }}
</div><!-- /surname_field -->
</form>
</div>

Answer 2

Try with single form
{% extends "::base.html.twig" %}
{% block body %}
<form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}>
<ul class="tabs">
<li class="left">tab1</li>
<li class="left">tab2</li>
<li class="left">tab3</li>
<li class="right">tab4</li>
</ul>
<div class="tabs_container">
<div id="tab1" class="blocco-tab">
<div id="name_field">
{{ form_row(form.name) }}
</div><!-- /name_field -->
<div id="address">
{{ form_row(form.addresses[0].road) }}
</div><!-- /address_field -->
</div>
<div id="tab2" class="blocco-tab">
<div id="surname_field">
{{ form_row(form.surname) }}
</div><!-- /surname_field -->
</div>
</div> <!-- contenitore_tabs -->
</form>
{% endblock %}
Then you have in ocontroller aaaAction()
public function aaaAction(Request $request){
$person = new Person();
$address = new Address();
$addr_coll = new ArrayCollection();
$addr_coll->add($address);
$person->setAddresses($addr_coll);
$form = $this->createForm(new PersonType(), $person);
if ($request->getMethod() == 'POST')
{
$form->bindRequest($request);
if ($form->isValid())
/*ecc ecc ecc*/
}
and class for form builder like
class PersonType extends AbstractType {
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('name', null, array())
->add('surname', null, array())
->add('addresses', null, array())
;
}
public function getName()
{
return 'person';
}
public function getDefaultOptions(array $options)
{
return array(
'data_class' => 'Acme\YourBundle\Entity\Person',
);
}
}

Answer 3

as I mentioned before I solved wrapping all tabs in a single form. Both of your solutions are ok, thank you for your time.
Linuxatico

Answer 4

In case anyone else has this problem, you can solve it like this (I am not sure if this is the most elegant solution but I think its better than making one big form for everything). This example mixes the profile and changePassword FOSUserBundle forms:
Inside your main show template (Profile:show.html.twig in my case):
{% if profileForm is defined %}
{% include 'MyBundle:Profile:edit.html.twig' with {'form':profileForm} %}
{% else %}
{% render 'MyBundle:Profile:edit' %}
{% endif %}
Repeat for changePassword:
{% if passwdForm is defined %}
{% include 'MyBundle:ChangePassword:changePassword.html.twig' with {'form':passwdForm} %}
{% else %}
{% render 'FOSUserBundle:ChangePassword:changePassword' %}
{% endif %}
In your controllers (add else):
if ($form->isValid()) {
.....
else {
return $this->container->get('templating')->renderResponse('FOSUserBundle:Profile:show.html.'.$this->container->getParameter('fos_user.template.engine'),
array('user' => $user, 'profileForm' => $form->createView()));
}
Add the profileForm and passwdForm accordingly. In my case the modified controllers were the ProfileController and ChangePasswordControllers (FOSUserBundle overrides).
As for your tabs, you can add javascript (or twig) to open the tab if any error is found.
Hope this helps :)