Geek asks and answers

Symfony2 multiple forms in different tabs of jQuery user interface but one page

I am having a problem that I can summarize as follows: I have a TWIG template page similar to this one (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 %}

The first name , last name , and address fields refer to a sample Symfony2 Person object. addresses is the first and only element of the address set (I need this as a collection for other reasons)

Working JS file:

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

Entity File:

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

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

And in 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*/
}

, FormType , , "hidden" "property_path" = > false, , ( ), .

(== ), , , , symfony. N JQuery UI .

, , ?

  • , ?
  • ?
  • - ?

, , .

+5
4

, . , .

Linuxatico

0

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

{% 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 %}

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*/
}


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',
        );
    }
}
0

- , ( , , , , ). Password FOSUserBundle:

(: show.html.twig ):

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

changePassword:

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

( ):

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 form Profile and passwdForm respectively. In my case, the modified controllers were ProfileController and ChangePasswordControllers (FOSUserBundle overrides).

As for your tabs, you can add javascript (or branch) to open the tab if any error is detected.

Hope this helps :)

0
source

More articles:


All Articles