4

Estoy intentando realizar un formulario de registro donde aparte de los campos habituales nombre, alias, contraseña (nombre, nick y password)... Añado también dos campos dependientes, Municipio y Provincia.


El problema es que solo muestra multiples mensajes de undefined en el campo municipio.

introducir la descripción de la imagen aquí


La entidad (Entity) que crea el formulario es DbUsuario, que tiene el campo idMunicipio.

/** @var \BackendBundle\Entity\DbMunicipios */
private $idMunicipio;

/**
 * Set idMunicipio
 * @param \BackendBundle\Entity\DbMunicipio $idMunicipio
 * @return DbUsuario
 */
public function setIdMunicipio(\BackendBundle\Entity\DbMunicipio $idMunicipio = null) {
    $this->idMunicipio = $idMunicipio;
    return $this;
}
/**
 * Get idMunicipio
 * @return \BackendBundle\Entity\DbMunicipio
 */
public function getIdMunicipio() {
    return $this->idMunicipio;
}

Luego la entidad DbMunicipio que conecta con provincia:

/** @var \BackendBundle\Entity\DbProvincia */
private $provincia;

/**@param \BackendBundle\Entity\DbProvincia $provincia
 * @return DbMunicipio
 */
public function setProvincia(\BackendBundle\Entity\DbProvincia $provincia = null){
    $this->provincia = $provincia;
    return $this;
}
/**@return \BackendBundle\Entity\DbProvincia */
public function getProvincia(){
    return $this->provincia;
}

Y la Entidad DbProvincia que solo tiene los campos id (integer), slug (String) y provincia (String).

Defino el formulario de la siguiente manera:

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Doctrine\ORM\EntityRepository;
use AppBundle\Form\EventListener\AddProvinciaField;
use AppBundle\Form\EventListener\AddMunicipioField;

class RegistreUserType extends AbstractType {

    public function buildForm(FormBuilderInterface $builder, array $options) {
         $factory = $builder->getFormFactory(); 

        $builder->add('nombre', TextType::class, array('label' => 'Nombre',
            'required' => 'required',
            'attr' => array('class' => 'form-nombre form-control')
        ));
        $builder->add('apellido', TextType::class, array('label' => 'Apellido',
            'required' => 'required',
            'attr' => array('class' => 'form-apellido form-control')
        ));
        $builder->add('nick', TextType::class, array('label' => 'Nick',
            'required' => 'required',
            'attr' => array('class' => 'form-nick form-control nick-input')
        ));
        $provinSubscriber = new AddProvinciaField($factory);
        $builder->addEventSubscriber($provinSubscriber);

        $muniSubscriber = new AddMunicipioField($factory);
        $builder->addEventSubscriber($muniSubscriber);

        $builder->add('email', EmailType::class, array('label' => 'Correo electrónico',
            'required' => 'required',
            'attr' => array('class' => 'form-email form-control')
        ));
        $builder->add('password', PasswordType::class, array('label' => 'Password',
            'required' => 'required',
            'attr' => array('class' => 'form-password form-control')
        ));
        $builder->add('Registrarse', SubmitType::class, array("attr" => array("class" => "form-submit btn btn-success")));
    }
    public function configureOptions(OptionsResolver $resolver) {
        $resolver->setDefaults(array(
            'data_class' => 'BackendBundle\Entity\DbUsuario'
        ));
    }
    public function getBlockPrefix() { return 'backendbundle_dbusuario'; }
}

Defino dentro de AppBundle\Form\eventListener las clases, llamadas en el formulario:

AddProvinciaField
namespace AppBundle\Form\EventListener;

use Symfony\Component\Form\Form;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\Form\FormFactoryInterface;
use Doctrine\ORM\EntityRepository;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use BackendBundle\Entity\DbProvincia;

class AddProvinciaField implements EventSubscriberInterface
{
     private $factory;

    public function __construct(FormFactoryInterface $factory) {
        $this->factory = $factory;
    }
    public static function getSubscribedEvents() {
        return array(
            FormEvents::PRE_SET_DATA => 'preSetData',
            FormEvents::PRE_SUBMIT     => 'preSubmit'
        );
    }
    private function addProvinciaForm($form, $provincia) {

       $form -> add('provincia', EntityType::class, array(
            'class'         => 'BackendBundle:DbProvincia',
            'label'         => 'Provincia',
            'placeholder'   => '_ Elegir _',
            'auto_initialize' => false,
            'mapped'        => false,
            'attr'=> array('class' => 'form-provincia form-control provincia-input'),
            'query_builder' => function (EntityRepository $repository) {
                $qb = $repository->createQueryBuilder('provincia');
                return $qb;
            }
        ));
    }
    public function preSetData(FormEvent $event){
        $data = $event->getData();
        $form = $event->getForm();

        if (null === $data) {return;}

        $provincia = ($data->getIdMunicipio()) ? $data->getIdMunicipio()->getProvincia() : null ;
        $this->addProvinciaForm($form, $provincia);
    }
    public function preSubmit(FormEvent $event) {
        $data = $event->getData();
        $form = $event->getForm();

        if (null === $data) { return;}

        $provincia = array_key_exists('provincia-input', $data) ? $data['provincia-input'] : null;
        $this->addProvinciaForm($form, $provincia);
    }
}

Y posteriormente defino AddMunicipioField.php:

 namespace AppBundle\Form\EventListener;

 use Symfony\Component\Form\FormEvent;
 use Symfony\Component\Form\FormEvents;
 use Symfony\Component\Form\FormFactoryInterface;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 use Doctrine\ORM\EntityRepository;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use BackendBundle\Entity\DbProvincia;


class AddMunicipioField implements EventSubscriberInterface {
    private $factory;

    public function _construct(FormFactoryInterface $factory) {
        $this->factory = $factory;
    }

    public static function getSubscribedEvents() {
        return array(
            FormEvents::PRE_SET_DATA => 'preSetData',
            FormEvents::PRE_SUBMIT     => 'preSubmit'
        );
    }
    private function addMunicipioForm($form, $provincia) {
        $form->add('idMunicipio', EntityType::class, array(
            'class'         => 'BackendBundle:DbMunicipio',
            'label'         => 'Municipio',
            'placeholder'   => '_ Elegir _',
            'auto_initialize' => false,
            'attr'=> array('class' => 'form-municipio form-control municipio-input'),
            'query_builder' => function (EntityRepository $repository) use ($provincia) {
                $qb = $repository->createQueryBuilder('idMunicipio')
                    ->innerJoin('idMunicipio.provincia', 'provincia');
                if ($provincia instanceof DbProvincia) {
                    $qb->where('idMunicipio.provincia = :provincia')
                    ->setParameter('provincia', $provincia);
                    var_dump($provincia);
                } elseif (is_numeric($provincia)) {
                    $qb->where('provincia.id = :provincia')
                    ->setParameter('provincia', $provincia);
                    var_dump($provincia);
                } else {
                    $qb->where('provincia.provincia = :provincia')
                    ->setParameter('provincia', null);
                    var_dump($provincia);
                }
                return $qb;
            }
        ));
    }
    public function preSetData(FormEvent $event){
        $data = $event->getData();
        $form = $event->getForm();

        if (null === $data) { return; }

        $provincia = ($data->getIdMunicipio()) ? $data->getIdMunicipio()->getProvincia() : null ;
        $this->addMunicipioForm($form, $provincia);
    }
    public function preSubmit(FormEvent $event){
        $data = $event->getData();
        $form = $event->getForm();

        if (null === $data) { return; }

        $provincia = array_key_exists('select_provincia', $data) ? $data['select_provincia'] : null;
        $this->addMunicipioForm($form, $provincia);
    }
}

Y por último la petición AJAX:

$(document).ready(function () {
    $('.provincia-input').change(function () {
        var $form = $(this).closest('form');
        var data = $('.provincia-input').serialize();

        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: data,
            success: function (html) {
                $('.municipio-input').replaceWith($(html).find('.municipio-input'));
            }
        });
    });
});
9
  • cómo está definita la ruta que recibe el POST? Has revisado lo que vienen en la respuesta del ajax, por ejemplo mediante chrome devtools?
    – ffflabs
    Commented el 13 mar. 2017 a las 11:44
  • Un error que son los '#provincia-input' que debe ser '.provincia-input'. Ahora el codigo AJAX se executa. Probando e visto que la consulta sql devuelve null siempre. La request es backendbundle_dbusuario%5Bprovincia%5D=11 11 varia según la provincia que se escoja.
    – Merche
    Commented el 13 mar. 2017 a las 18:39
  • También me sale el error: The CSRF token is invalid. Please try to resubmit the form.
    – Merche
    Commented el 13 mar. 2017 a las 18:56
  • php.ini he cambiado los valores siguientes, Maximum allowed size for uploaded files. upload_max_filesize = 20048M and ; How many GET/POST/COOKIE input variables may be accepted max_input_vars = 25000 pero aun persiste el error.
    – Merche
    Commented el 13 mar. 2017 a las 19:17
  • He resuelto el error de CSRF modificando el script AJAX.
    – Merche
    Commented el 13 mar. 2017 a las 20:12

1 respuesta 1

0

Resuelto:

En el formulario llamo las dos nuevas clases que definiré mas abajo para crear los dos selects dependientes. 'idMunicipio' es como se llama el campo en la Entidad.

$builder -> addEventSubscriber(new AddMunicipioFieldSubscriber('idMunicipio'));
$builder -> addEventSubscriber(new AddProvinceFieldSubscriber('idMunicipio'));

Primer select, seleccionar provincias.

class AddProvinceFieldSubscriber implements EventSubscriberInterface {
private $propertyPathToMunicipio;

public function __construct($propertyPathToMunicipio) {
    $this->propertyPathToMunicipio = $propertyPathToMunicipio;
}

public static function getSubscribedEvents() {
    return array(
        FormEvents::PRE_SET_DATA => 'preSetData',
        FormEvents::PRE_SUBMIT   => 'preSubmit'
    );
}

private function addProvinceForm($form, $Province = null) {
    $formOptions = array(
        'class'         => 'BackendBundle:DbProvincia',
        'mapped'        => false,
        'label'         => 'Provincia',
        'attr'          => array(
            'class' => 'class_select_provincia',
        ),
    );

    if ($Province) {
        $formOptions['data'] = $Province;
    }

    $form->add('provincia', EntityType::class, $formOptions);
}

public function preSetData(FormEvent $event){
    $data = $event->getData();
    $form = $event->getForm();

    if (null === $data) {
        return;
    }

    $accessor = PropertyAccess::createPropertyAccessor();

    $municipio    = $accessor->getValue($data, $this->propertyPathToMunicipio);
    $provincia = ($municipio) ? $municipio->getIdMunicipio()->getProvincia() : null;

    $this->addProvinceForm($form, $provincia);
}

public function preSubmit(FormEvent $event){
    $form = $event->getForm();

    $this->addProvinceForm($form);
}
}

Segundo select dependiente de provincias, seleccionar municipios.

class AddMunicipioFieldSubscriber implements EventSubscriberInterface {

private $propertyPathToMunicipio;

public function __construct($propertyPathToMunicipio){
    $this->propertyPathToMunicipio = $propertyPathToMunicipio;
}

public static function getSubscribedEvents(){
    return array(
        FormEvents::PRE_SET_DATA  => 'preSetData',
        FormEvents::PRE_SUBMIT    => 'preSubmit'
    );
}

private function addCityForm($form, $province_id){
    $formOptions = array(
        'class'         => 'BackendBundle:DbMunicipio',
        'label'         => 'Municipio',
        'attr'          => array(
            'class' => 'class_select_municipio',
        ),
        'query_builder' => function (EntityRepository $repository) use ($province_id) {
            $qb = $repository->createQueryBuilder('municipio')
                ->innerJoin('municipio.provincia', 'provincia')
                ->where('provincia.id = :provincia')
                ->setParameter('provincia', $province_id)
            ;

            return $qb;
        }
    );

    $form->add($this->propertyPathToMunicipio, EntityType::class, $formOptions);
}

public function preSetData(FormEvent $event){
    $data = $event->getData();
    $form = $event->getForm();

    if (null === $data) {
        return;
    }

    $accessor    = PropertyAccess::createPropertyAccessor();

    $municipio        = $accessor->getValue($data, $this->propertyPathToMunicipio);
    $province_id = ($municipio) ? $municipio->getIdMunicipio()->getProvincia()->getId() : null;

    $this->addCityForm($form, $province_id);
}

public function preSubmit(FormEvent $event){
    $data = $event->getData();
    $form = $event->getForm();

    $province_id = array_key_exists('provincia', $data) ? $data['provincia'] : null;

    $this->addCityForm($form, $province_id);
} 
}

En el controlador añado la siguiente función para recoger el valor id de la provincia y generar la consulta dql.

    public function municipioTestAction(Request $request){
    $provincia_id = $request->get('provincia_id');

    $em = $this->getDoctrine()->getManager();
    $provincia = $em->getRepository('BackendBundle:DbMunicipio')->findByProvinceId($provincia_id);

    return new JsonResponse($provincia);
}

La funcion findByProvinceId, la creo como una clase nueva tipo repositorio en las entidades donde añado mi funcion nueva para hacer la busqueda.Esta de devuelve un array con las entidades DbMunicipio que busco.

class DbMunicipioRepository extends EntityRepository{

public function findByProvinceId($provincia_id){

    $query = $this->getEntityManager()->createQuery("
        SELECT muni
        FROM BackendBundle:DbMunicipio muni
        LEFT JOIN muni.provincia provin
        WHERE provin.id = :provincia_id
    ")->setParameter('provincia_id', $provincia_id);

    return $query->getArrayResult();
} 
}

Y el codigo AJAX.

$(document).ready(function () {
$(".class_select_provincia").change(function(){
    var data = {
        provincia_id: $(this).val()
    };

    $.ajax({
        type: 'POST',
        url: URL+'/municipio-test',
        data: data,
        success: function(data) {

            var $muni_selector = $('.class_select_municipio');
            alert(data);
            $muni_selector.html('<option>Ciudad</option>');

            for (var i=0, total = data.length; i < total; i++) {
                $muni_selector.append('<option value="' + data[i].id + '">' + data[i].municipio + '</option>');
            }
        }
    });
});
});
1
  • Hola Merche. No olvides marcar la respuesta como correcta para cerrar la pregunta como resuelta.
    – Muriano
    Commented el 24 mar. 2017 a las 11:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.