不处理模态中的Symfony2形式

时间:2014-12-12 13:40:20

标签: jquery forms twitter-bootstrap symfony

我将表单从表单类渲染为基于模式的表单,然后根据按下的按钮执行不同的操作。表单的目的是编辑实体。

当我以模态显示表单时,无论我按哪个按钮,它都不会处理它,但是当我在新选项卡中呈现表单时,所有操作都会正确执行。

奇怪的是,即使我现在的代码中禁用了将用户推回到完整资源列表的重定向,当我单击模式按钮时页面仍会刷新。

解决方案:

我需要手动将表单操作添加到模式中的表单,以便它调用正确的控制器操作进行处理。为了达到这个解决方案,没有太多的讨论,所以为了方便他人,我们走了:

{{ form_start(form, {'action': path('sfi_teacher_manage_resource', { 'id': resource.id, 'action': user_action })}) }}

我的表单类:

<?php
namespace SFI\MainBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class ManageResourceType extends AbstractType
{
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
    $builder
      ->add('name', 'text', array(
        'required' => true,
        'attr' => array(
          'class' => 'form-control',
          'placeholder' => 'Resource name',
        ),
      ))
      ->add('type', 'choice', array(
        'required' => true,
        'empty_value' => 'Choose a type',
        'choices' => array('w' => 'Website', 'v' => 'Video', 'a' => 'Audio'),
        'attr' => array(
          'class' => 'form-control',
        ),
      ))
      ->add('link', 'text', array(
        'required' => true,
        'attr' => array(
          'class' => 'form-control',
          'placeholder' => 'Add a link',
        ),
      ))
      ->add('description', 'textarea', array(
        'required' => true,
        'attr' => array(
          'class' => 'textarea',
          'style' => 'width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;',
          'placeholder' => 'Write a description...',
        ),
      ))
      ->add('save', 'submit', array(
        'attr' => array(
          'class' => 'btn btn-success',
        ),
      ))
      ->add('remove', 'submit', array(
        'attr' => array(
          'class' => 'btn btn-danger',
        ),
      ));

  }

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

  public function setDefaultOptions(OptionsResolverInterface $resolver)
  {
    $resolver->setDefaults(array(
      'data_class' => 'SFI\MainBundle\Entity\Resource',
    ));
  }
}

此行动的路线:

sfi_teacher_manage_resource:
    path:     /teacher/resource/manage/{action}/{id}
    defaults: { _controller: SFIMainBundle:Teacher:manageResource }

我的控制器操作:

public function manageResourceAction($id, $action, Request $manage_request)
{
  $logger = $this->get('logger');

  $em = $this->getDoctrine()->getManager();

  $managedResource = $em->getRepository('SFIMainBundle:Resource')->find($id);
  $logger->info('Started the manage action');

  $manageResourceForm = $this->createForm(new ManageResourceType(), $managedResource);
  $logger->info('Loaded managedResource into FormType.');

  $manageResourceForm->handleRequest($manage_request);

  if ($manageResourceForm->isValid())
  {

    $logger->info('Form was valid.');

    if ($manageResourceForm->get('save')->isClicked()) {
      $logger->info('Save was clicked, editing resource.');
      $managedResource->setStatus("1");
      $logger->info('Status set to approved.');
      $em->persist($managedResource);
      $logger->info('Resource was persisted.');
    } elseif ($manageResourceForm->get('remove')->isClicked()) {
      $logger->info('Remove / Decline was clicked');
      $em->remove($managedResource);
      $logger->info('Resource removed.');
    }

    $em->flush();
    $logger->info('Flushing...');
    $logger->info("Redirecting to teacher's resources...");
    //return $this->redirect($this->generateUrl('sfi_teacher_resources'));
  }

  return $this->render('SFIMainBundle:Teacher:manageResource.html.twig', array(
    'user_action' => $action,
    'form' => $manageResourceForm->createView(),
  ));
}

正如您所看到的,我不得不在某些控制台日志中进行烘焙,以确定该操作何时停止工作。

如果我将表单作为新标签打开,一切都很好,但不是模态。有人向我建议一些JavaScript可能妨碍提交按钮正常工作,但我不知道从哪里开始调试。

如果您需要更多信息,请告诉我们!

编辑1:根据要求,我将包括如何定义和创建模态。

在我的resources.html.twig上,正在加载资源列表,我为每个实体提供了这样的几个链接:

{% if r.status == "0" %}
  <a href="{{ path('sfi_teacher_manage_resource', { 'id': r.id, 'action': 'review' }) }}" data-target="#manageResource" data-toggle="modal" class="btn btn-info bold" id="review"><i class="fa fa-fw fa-check-circle"></i>Review</a>
{% elseif r.status == "1" %}
  <a href="{{ path('sfi_teacher_manage_resource', { 'id': r.id, 'action': 'edit' }) }}" data-target="#manageResource" data-toggle="modal" class="btn btn-info" id="edit"><i class="fa fa-fw fa-edit"></i>Edit</a>
{% endif %}

模态本身是在同一个模板中预先构建的,因为Symfony在使用Bootstrap模式时需要这样做(之前我使用过模态un SF,这是我能想到让它们工作的唯一方法将数据或表格加载到其中时:)

<div class="modal fade" id="manageResource" tabindex="-1" role="dialog" aria-labelledby="Manage resource" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   Loading...
  </div>
 </div>
</div>

一旦检索到对象并将其加载到表单中,模态内容将替换为 manageResources.html.twig 的内容:

{{ form_start(form) }}
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title" id="myModalLabel">Manage resource</h4>
</div>
<div class="modal-body">
  {{ form_errors(form) }}
  <div class="form-group">
    {{ form_errors(form.name) }}
    {{ form_widget(form.name) }}
  </div>
  <div class="form-group">
    {{ form_errors(form.type) }}
    {{ form_widget(form.type) }}
  </div>
  <div class="form-group">
    {{ form_errors(form.link) }}
    {{ form_widget(form.link) }}
  </div>
    {{ form_errors(form.description) }}
    {{ form_widget(form.description) }}
</div>
<div class="modal-footer">
  <div class="pull-left">
    {% if user_action == "review" %}
    {{ form_widget(form.save, { 'label': 'Approve' }) }}
  {{ form_widget(form.remove, { 'label': 'Decline' }) }}
    {% elseif user_action == "edit" %}
    {{ form_widget(form.save, { 'label': 'Save' }) }}
    {{ form_widget(form.remove, { 'label': 'Remove' }) }}
    {% endif %}
  </div>
  <div class="pull-right">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  </div>
</div>
{{ form_end(form) }}

这涵盖了此操作中涉及的所有代码。

1 个答案:

答案 0 :(得分:0)

感谢您发布模板代码,我会尽快仔细查看。 一个想法:我会尝试在 manageResources.html.twig 中明确设置表单的操作 尝试这样的事情(适应正确的参数):

{{ form_start(form, {'action': path('sfi_teacher_manage_resource', { 'id': resource.id, 'action': user_action })}) }}