javascript - 单击时显示 symfony 表单

Question

我想创建一个评论部分，并且想要一个动态回复按钮，以便单击该按钮后，表单会显示在我想要重播的评论下方。我正在调用 symfony 形式 {{render(controller('BlogBundle:Comment:new',{'blog_id' : BlogPost.id }))}} 的方法所以它总是显示在同一个地方。但是，当我想要重播评论时，我希望能够通过单击按钮来显示表单，我可以使用与第一个任务相同的表单来做到这一点吗？因为我需要默认隐藏它。

这是我现在调用的 Controller ，用于显示表单

public function newAction($blog_id)
{
    $comment = new Comment();
    $comment->setBlog($blog_id);
    $form =  $this->createForm(CommentType::class, $comment);

    return $this->render('BlogBundle:Default:form.html.twig',array(
        'form' => $form->createView(),
        'comment' => $comment
        ));
}

这是我的表格

class CommentType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
        ->add('name')
        ->add('text')
        ->add('send', SubmitType::class, array(
            'attr' => array('class' => 'send')));
    }
}

只是为了显示按钮，我正在这样做

{% for comment in comments %}
    {{comment.name}} <div id = "buttonDisplayForm"><button type="button" class="btn btn-primary">Reply</button></div>
    <p>{{comment.text}}</p>

{% endfor %}

但我需要以某种方式在 <p>{{comment.text}}</p> 下面显示表单单击按钮。

Answer 1

这与 Symfony 无关本身。正如@axel.michel指出的，您可以隐藏表单。

一种方法是将表单渲染(以 {{ form_start() }} 开头并以 {{ form_end() }} 结尾)包装在一些隐藏的 <div> 中。 :

<div style="display: none" id="my_form">
    {{ form_start(form) }}
    Rest of your form rendering calls go here...
    {{ form_end(form) }}
</div>

然后，只需应用类似于 @axel.michel 在第一条评论中建议的内容即可。

更新

$(".buttonDisplayForm")
    .on('click', function() { 
        $('#reply_form').append('{{render(controller("BlogBundle:Comm‌​ent:new",{"blog_id‌​": BlogPost.id})) }}')
    });

一些要点:

• {{ render }}需要用引号括起来(在我的例子中我选择单引号)
• render操作发生在服务器上，而不是客户端上。如果你真的想用AJAX的话请考虑一下- BlogPost.id将为所有请求修复。
• 在render内本身，我选择使用双引号，以尽量减少与 Symfony 的潜在混淆。什么是 JS

希望这有帮助...