如何构建 Symfony 以检查“onChange”下拉字段？

Question

在我的示例中，我有四个实体要用于博客平台：Owner Post User Location

• 一个所有者可以有多个帖子
• 一个帖子可以有多个用户和位置

我正在尝试创建一个管理表单，我可以在其中从下拉菜单中选择 Owner，这将刷新表单 onChange 以填充 Posts的下拉菜单>。

当一个 Post 被选中时，表单再次刷新，表单字段 Users 和 Locations 与该帖子相关联。然后我可以：

1. 使用更多信息（例如用户的出生日期或位置的 GPS 坐标）更新现有实体
2. 创建任一实体的新实例以附加到 Post

我没有包含 Location 实体，也没有包含命名空间/包含语句，因为它们会影响我的主要问题，即如何在控制器/表单类型中编码这样的管理页面（我的尝试如下）：

控制器：

/**
* @Route("/adminposts", name="admin_posts")
*/
public function updatePostsAction(Request $request)
{
  $user = new User();
  $form = $this->createForm(new UserType(), $user);
  $form->handleRequest($request);

  if ($form->isSubmitted() && $form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($owner);
        $em->persist($post);
        $em->persist($user);
        $em->persist($location);
        $em->flush();
        return $this->redirectToRoute('homepage');
  }
  return $this->render('AppBundle:Default:adminupdate.post.html.twig', array(
        'form' => $form->createView(),
  ));
}

用户表单类型：

class UserType extends AbstractType
{
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
        $builder
             ->add('owner','entity',array(
                  'class'=>'AppBundle:Owner',
                  'choice_label'=>'username',
                  'query_builder'=>function(EntityRepository $er) {
                        return $er->createQueryBuilder('d')
                             ->orderBy('d.username','ASC');
                  }))

             ->add('post','entity',array(
                  'class'=>'AppBundle:Post',
                  'choice_label'=>'posttext',
                  'query_builder'=>function(EntityRepository $er) {
                        return $er->createQueryBuilder('d')
                             ->orderBy('d.postdate','ASC');
                  }))

             ->add('Firstname')
             ->add('Surname')
             ->add('DOB')
             ->getForm();
  }

  public function configureOptions(OptionsResolver $resolver)
  {
        $resolver->setDefaults(array(
             'data_class' => 'AppBundle\Entity\Users',
        ));
  }

  public function getName()
  {
        return 'user';
  }
}

Answer 1

好的，也许你可以看看这里：Symfony2: Change choices with ajax and validation 或者按照我的方法：

在您的用户类型中：

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('owner','entity',array(
                'class'=>'AppBundle:Owner',
                'choice_label'=>'username',
                'query_builder'=>function(EntityRepository $er) {
                    return $er->createQueryBuilder('o')
                        ->orderBy('o.username','ASC');
                }))

            ->add('Firstname')
            ->add('Surname')
            ->add('DOB');

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


    protected function addElements(FormInterface $form, $owner = null)
    {
        if($owner){
            $form->add('post','entity',array(
                'class'=>'AppBundle:Post',
                'choice_label'=>'posttext',
                'query_builder'=>function(EntityRepository $er, $owner) {
                    return $er->createQueryBuilder('p')
                        ->join('p.owner', 'o')
                        ->where('o.id = :ownerID')
                        ->setParameter('ownerID', $owner->getID() )
                        ->orderBy('d.postdate','ASC');
                }));
        }
        else{
            $form->add('post','choice',array(
                'choice_label'=>'posttext',
                'empty_value' => '-- Choose --',
                'choices' => array())
            );
        }
    }

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

        $this->addElements($form, $data->getOwner());
    }

    public function onPreSetData(FormEvent $event)
    {
        /** @var User user */
        $user = $event->getData();
        $form = $event->getForm();

        $this->addElements($form, $user->getOwner());
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundle\Entity\Users',
        ));
    }

    public function getName()
    {
        return 'user';
    }
}

我假设你知道如何在 jQuery 中创建一个 onChange 事件（我曾经使用它）和一个 ajax 调用。

在你看来，只是为了提醒：

 {{ form_row(
        form.owner,
        {
            'attr': {               
                'data-owner-id': ""~form.owner.vars.id,
                'class': "change-posts-per-owner",
            }
        }
    ) }}
    {{ form_row(form.post) }}
    {{ form_row(form.firstname) }}
    {{ form_row(form.surname) }}
    {{ form_row(form.DOB) }}

还有你的 Ajax 脚本：

   $(document).on('change', 'select .change-posts-per-owner', function(){

       var ownerID = $(this).data("owner-id");

       $.ajax({
         url:  your_url,
         type: "GET", //or POST
         data: 'ownerID='+ownerID,
         dataType: 'JSON', //or html or whatever you want
         success:function(data) { 
          //Replace <option element in your select element for post list considering your dataType (type of response)
         }
      });

    }

您也可以使用$.post() 或$.get() 代替显式方法$.ajax(); 我建议您使用 FOSJSRoutingBundle 通过Routing.generate() 方法指示您的网址。