Symfony2 múltiples formas en diferentes pestañas jQuery UI, pero sola página

Question

estoy frente a un problema que puedo resumir como sigue: Tengo una página RAMITA plantilla como esta (reg.html.twig):

{% extends "::base.html.twig" %} 
{% block body %} 
<ul class="tabs"> 
    <li class="left"><a href="#tab1">tab1</a></li> 
    <li class="left"><a href="#tab2">tab2</a></li> 
    <li class="left"><a href="#tab3">tab3</a></li> 
    <li class="right"><a href="#tab4">tab4</a></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 %} 

campos nombre, apellido y direcciones pertenecen a una entidad muestra de Symfony2 persona. direcciones es el primer y único elemento de una colección de direcciones (Necesito esto como recogida por otras razones)

El archivo JS de trabajo es:

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; 
    }); 
}); 

El archivo Entidad:

class Person { 
    protected $name; 
    protected $surname; 
    protected $addresses; 

    public function __construct(){ 
     $this->addresses = new ArrayCollection(); 
    } 
} 

Y en el 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*/ 
} 

En realidad tomé el camino de tener todos los FormType con todos los campos que no necesito renderizados pero coloqué 'hidden' y 'property_path' => falso, porque no puedo representar solo los campos deseados porque los otros causan errores en el tiempo de ejecución (son nulos), pero sigo teniendo problemas para manejar ambos casos de forma conjunta.

Poniendo cada formulario en una página diferente (== Ruta diferente), con diferentes Controladores, todo funciona bien, por lo que no es un problema relacionado con el uso básico de Symfony, es la integración de N formularios en una sola página con JQuery UI que me hace llorar.

Resuelto que tengo que usar estas pestañas, ¿cómo puedo resolverlas?

1. ¿Tengo que hacer una sola acción manejando todo?
2. ¿Debo hacer una sola forma?
3. ¿Extraño algo?

Gracias de antemano, espero haber sido claro en la explicación de mi problema.

Answer 1

Como mencioné antes resolví envolviendo todas las pestañas en una sola forma. Ambas soluciones están bien, gracias por su tiempo.

Linuxatico

Answer 2

que acaba de utilizar la misma variable para diferentes formas

<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 3

Pruebe con una sola forma

{% extends "::base.html.twig" %} 
{% block body %} 
<form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}> 
<ul class="tabs"> 
    <li class="left"><a href="#tab1">tab1</a></li> 
    <li class="left"><a href="#tab2">tab2</a></li> 
    <li class="left"><a href="#tab3">tab3</a></li> 
    <li class="right"><a href="#tab4">tab4</a></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 %} 

Entonces usted tiene en 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*/ 
} 

y la clase de constructor de la forma como

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 4

En caso de que alguien más tiene este problema, se puede resolver como esto (no estoy seguro si esto es la solución más elegante pero creo que es mejor que hacer una forma grande para todo). En este ejemplo se mezcla el perfil y changePassword FOSUserBundle formas:

Dentro de su plantilla espectáculo principal (Perfil: show.html.twig en mi caso):

 {% if profileForm is defined %} 
      {% include 'MyBundle:Profile:edit.html.twig' with {'form':profileForm} %} 
     {% else %} 
      {% render 'MyBundle:Profile:edit' %} 
     {% endif %} 

Repetir para changePassword:

 {% if passwdForm is defined %} 
      {% include 'MyBundle:ChangePassword:changePassword.html.twig' with {'form':passwdForm} %} 
     {% else %} 
      {% render 'FOSUserBundle:ChangePassword:changePassword' %} 
     {% endif %} 

en los controladores (añadir otra cosa):

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())); 
     } 

Añadir la profileForm y passwdForm en consecuencia. En mi caso, los controladores modificados fueron ProfileController y ChangePasswordControllers (FOSUserBundle anula).

En cuanto a sus pestañas, puede agregar javascript (o ramita) para abrir la pestaña si se encuentra algún error.

Espero que esto ayude :)