ajax - 如何根据用户选择获取实体的子项(即两个实体 A 和 B B 的列表基于所选的 A )

Question

我需要实现的是，当我选择一个类别时，与该类别相关的技能会在表格中可供选择。类别和技能之间的关系是多对多关系。我也从这里开始关注本教程 https://symfony.com/doc/current/form/dynamic_form_modification.html#form-events-submitted-data并得出以下结论。

Form

class ProjectType extends AbstractType 

 {
/**
 * @param FormBuilderInterface $builder
 * @param array                $options
 */


public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('category', EntityType::class, array(
            'class'=>'AppBundle:Category',
            'choice_label'=>'name'
             ))
        ->add('name',  TextType::class, array('label' => 'Name','attr' => array('class'=>'form-control')));

        $formModifier = function (FormInterface $form, Category $category = null) {
            $skills = null === $category ? array() : $category->getSkill();
            $skills = $this->getDoctrine()->getEntityManager()->merge($skills);
            $form->add('skill', EntityType::class, array(
                'class'       => 'AppBundle:Skill',
                'placeholder' => '',
                'choices'     => $skills,
            ));
        };

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($formModifier) {
                // this would be your entity, i.e. project
                $data = $event->getData();

                $formModifier($event->getForm(), $data->getCategory());
            }
        );

    $builder->get('category')->addEventListener(
        FormEvents::POST_SUBMIT,
        function (FormEvent $event) use ($formModifier) {
            // It's important here to fetch $event->getForm()->getData(), as
            // $event->getData() will get you the client data (that is, the ID)
            $category = $event->getForm()->getData();

            // since we've added the listener to the child, we'll have to pass on
            // the parent to the callback functions!
            $formModifier($event->getForm()->getParent(), $category);
        }
    );



    $builder->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
        $event->stopPropagation();
    }, 900);

Controller

$project = new Project();

    $form = $this->createForm(ProjectType::class, $project)
        ->add('save',  SubmitType::class, array(
            'label' => 'Save',
            'attr'=>array('class'=>'btn btn-md btn-info')
        ));

    $form->handleRequest($request);


    if ($form->isValid()) {

        $project->setCreated(new \DateTime());
        $project->setDiscontinue(0);
        $project->setViewed(0);

        $em = $this->getDoctrine()->getManager();
        $em->persist($project);
        $em->flush();

    }


        return  $this->render('default/project.html.twig',array(
            'form' => $form ->createView(),
        ));

View

{% block content%}
   <div class="">
 {{ form_start(form) }}
 {{ form_row(form.category) }}
 {{ form_row(form.skill) }}
 {{ form_end(form) }}
</div>
{% endblock %}
     script>
   var $category = $('#project_category');

  $category.change(function() {
    // ... retrieve the corresponding form.
    var $form = $(this).closest('form');
    // Simulate form data, but only include the selected sport value.
    var data = {};
    data[$category.attr('name')] = $category.val();
    // Submit data via AJAX to the form's action path.
    $.ajax({
        url : $form.attr('action'),
        type: $form.attr('method'),
        data : data,
        success: function(html) {
            // Replace current position field ...
            $('#project_skill').replaceWith(
                    // ... with the returned one from the AJAX response.
                    $(html).find('#project_skill')
            );
            // Position field now displays the appropriate positions.
        }
    });
});

I Get this error

传递给选择字段的实体必须被管理。也许将它们保存在实体管理器中？

this is the relationship btw Category and Skill

/**
 * @ORM\ManyToMany(targetEntity="Skill", inversedBy="category")
 * @ORM\JoinTable(name="category_skills")
 */
private $skill;
public function __construct()
{
    $this->skill = new ArrayCollection();
}
  /**
    * @ORM\ManyToMany(targetEntity="Category", mappedBy="skill")
    */
   private $category;

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

Answer 1

我希望这对某些人有所帮助。首先我感谢@J.M. Echevarría 我从 here 得到了这个答案我可以很容易地让你点击链接，但那个答案是 2014 年所以我只是为了可能需要解决方案的新手更新它。既然这样。

我想要实现的是让用户从一系列类别(实体 A)中进行选择，然后根据实体 A 进行第二个输入技能(实体 B)。为此，我们将使用 2 个不同的选择框:一个用于选择您的类别，然后选择下一个包含该类别所有技能的选择框。

The form (projetType)

<?php

  namespace AppBundle\Form\Type;

     use AppBundle\Entity\Category;
 //not that you have to import the entity manager to your form we will register         this in our service later
       use Doctrine\ORM\EntityManager;
       use Symfony\Component\Form\AbstractType;
       use Symfony\Component\Form\Extension\Core\Type\FileType;
       use Symfony\Component\Form\Extension\Core\Type\TextareaType;
        use Symfony\Component\Form\FormEvent;
       use Symfony\Component\Form\FormEvents;
       use Symfony\Component\Form\FormInterface;
       use Symfony\Component\Form\FormBuilderInterface;
        use Symfony\Component\Form\Extension\Core\Type\SubmitType;
       use Symfony\Bridge\Doctrine\Form\Type\EntityType;
      use Symfony\Component\Form\Extension\Core\Type\TextType;




      use Symfony\Component\OptionsResolver\OptionsResolver;

     /**
         * @author Akoh Ojochuma Victor <akoh.chuma@gmail.com>
          */

      class ProjectType extends AbstractType
       {

      protected $em;

public function __construct(EntityManager $em)
{
    $this->em = $em;
}
/**
 * @param FormBuilderInterface $builder
 * @param array                $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
            ->add('name',  TextType::class, array(
                'attr' => array('class'=>'form-control','placeholder'=>'Project name e.g Paint a house' ),
                ));
      // other filds

    // Add listeners
    $builder->addEventListener(FormEvents::PRE_SET_DATA, array($this, 'onPreSetData'));
    $builder->addEventListener(FormEvents::PRE_SUBMIT, array($this, 'onPreSubmit'));



}
protected function addElements(FormInterface $form, Category $category = null) {

    // Add the category element
    $form->add('category', EntityType::class, array(
        'class'=>'AppBundle:Category',
        'attr'=>array("id"=>"demoSelect","class"=>"form-control"),
        'choice_label'=>'name',
        'required' => false,
        'expanded'=>false,
        'data' => $category,
        'placeholder' => 'Choose a category (optional)',
    ));



    // For the sake of this project all the skills are presented to you if you
    // did not choose any particular category
    $skills = $this->em->getRepository('AppBundle:Skill')->findAll();



    //this would happen when the user selects a category
    if ($category) {
        // Fetch the skills for the selected category
        $repo = $this->em->getRepository('AppBundle:Skill');

        // this is your custom query for retrieving the skills from the database
        $skills = $repo->findCategorySkill($category, array('name' => 'asc'));
    }

    //add the skills
    $form->add('skill', EntityType::class, array(
        'class'=>'AppBundle:Skill',
        //pass in the skills gotten as choice
        'choices' => $skills,
        'attr'=>array("class"=>"form-control"),
        'choice_label'=>'name',
        'placeholder' => 'What skills are required ?',
        'multiple' => true,
        'required' => true,
        'expanded' => false,
        'label' => false,
    ));


}

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

    // Note that the data is not yet hydrated into the entity.

    $category =$this->em->getRepository('AppBundle:Category')->find($data['category']);
    $this->addElements($form, $category);
}


function onPreSetData(FormEvent $event) {
    $project = $event->getData();
    $form = $event->getForm();

    // We might have an empty account (when we insert a new account, for instance)
    $category = $project->getSkill() ? $project->getSkill()->getCategory() : null;
    $this->addElements($form, $category);
}

/**
 * @param OptionsResolver $resolver
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'AppBundle\Entity\Project',
    ));
}
/**
 * @return string
 */
public function getName()
{
    return 'app_project';
}
}

Ajax controller

     <?php

  namespace AppBundle\Controller;


      use Symfony\Bundle\FrameworkBundle\Controller\Controller;
     use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
     use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
     use AppBundle\Entity\Bid;
     use Symfony\Component\HttpFoundation\JsonResponse;
     use Symfony\Component\HttpFoundation\Request;
   use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

/**
  * Ajax controller.
  *
  * @Route("/ajax")
  */
  class AjaxController extends Controller
{


/**
 * get skill for category with ajax when a user select a category
 *
 * @Route("/category/skills", name="get-category-new")
 */
public function ajaxAction(Request $request) {
    if (! $request->isXmlHttpRequest()) {
        throw new NotFoundHttpException();
    }
    // Get the province ID
    $id = $request->query->get('category_id');
    $result = array();

    // Return a list of cities, based on the selected province
    $repo = $this->getDoctrine()->getManager()->getRepository('AppBundle:Skill');

    $skills = $repo->findCategorySkill($id);

    foreach ($skills as $skill) {
        $result[$skill->getName()] = $skill->getId();
    }
    return new JsonResponse($result);
}
}

Twig Template

  {# ajax stuuf but if this conflict with any of your js feel free to remove or try diff version #}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {


        $('#project_category').change(function(){

            var val = $(this).val();

            //alert('sucess');

            $.ajax({
                type: "POST",
                url: "{{ url('get-category-new') }}?category_id=" + val,
                success: function(data) {
                    // Remove current options


                    $('#project_skill').html('');
                    $.each(data, function(k, v) {
                        $('#project_skill').append('<option value="' + v + '">' + k + '</option>');
                    });
                }
            });
            return false;
        });
    });
</script>

repository

<?php

     namespace AppBundle\Repository;

    use Doctrine\ORM\EntityRepository;
    /**
      * SkillRepository
      *
     * This class was generated by the Doctrine ORM. Add your own custom
    * repository methods below.
    */
 class SkillRepository extends EntityRepository
    {
    public function findCategorySkill($category)
         {
         return $this
             ->createQueryBuilder('l')
             ->select('p')
             ->from('AppBundle:Skill','p')
             ->join('p.category', 'c')
             ->where('c = :category')
            ->setParameter('category', $category)
           ->getQuery()
            ->getResult();
     }

}

这是您的查询，请注意这是特定的，所以请随意将其交给您。

service include this in your services

app.form_project:
    class: AppBundle\Form\Type\ProjectType
    arguments: ["@doctrine.orm.entity_manager"]
    tags:
          - { name: form.type, alias: app_project_creation  }

是的，如果您需要详细解释，请访问此处 here