模态表单未将新用户数据写入数据库

Question

我正在尝试在模式中注册新用户，但我无法成功。

在 home/index.html.twig 中，我通过 AJAX:

显示模态

<div class="cell large-3 t-white bg-dark offset-2 pt-2">    
    <a onclick="createNew()"><img class="" src="{{ asset('images/add_button.svg') }}"></a>    //triggering ajax function
</div>

<div id="addUser" class="modal t-white">   //div for modal

function createNew() {
    $.ajax({
        url: "new",
        type: "POST",
        dataType: 'html',
        data: {},
        success: function (data) {
            $('#addUser').html(data);
        },
        error: function (error) {
            console.log(error);
        }
    });
    $('#addUser').css({display: 'block'});
}

UserController.php

/**
 * Creates a new User entity.
 *
 * @Route("/new", name="new")
 * @Method({"GET", "POST"})
 * @Template()
 */

public function new(Request $request, UserPasswordEncoderInterface $encoder)
{
    $user = new User();
    $form = $this->createForm(UserType::class, $user);
    $form->handleRequest($request);

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

    if ($form->isSubmitted() && $form->isValid()) {
        $user->setPassword($encoder->encodePassword($user, $user->getPassword()));

        $user->setRoles(["ROLE_USER"]);
        $em->persist($user);
        $em->flush();

        return $this->redirectToRoute('home', array('id' => $user->getId()));
    }
    return $this->render('user/new.html.twig',
        array('user' => $user,
              'form' => $form->createView(),));
}

UserType.php

class UserType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('username')
            ->add('password');
    }
}

user/new/html.twig

<div class="modal t-white" id="addUser" style="display: block">
    <div class="box-container center-vertically t-white" id="addWindow">
        <form method="post">
            <div class="box-form">
                {{ form_start(form) }}

                {{ form_errors(form.username) }}
                {{ form_widget(form.username) }}

                {{ form_errors(form.password) }}
                {{ form_widget(form.password) }}

                <input class="button btn-custom-1" type="submit" value="Create"/>
                {{ form_end(form) }}
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $("#addWindow").click(function (event) {
        event.stopPropagation();
    });
</script>

如果我尝试通过模态创建新用户，而不是在 /home 路径中，而是在 /new 路径中（没有模态），一切正常，新用户记录在数据库中。

如有任何帮助，我将不胜感激。谢谢。

Answer 1

要调用模式，您必须在 home/index.html.twig 上替换此代码：

<a onclick="createNew()"><img class="" src="{{ asset('images/add_button.svg') }}"></a>

通过这个：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUser">
  <img class="" src="{{ asset('images/add_button.svg') }}">
</button>

您必须在提交表单时执行 AJAX 调用，例如：

$('#form').submit(function(e) {
    e.preventDefault();
    var url = "{{ path('new') }}";
    var serialized = $(this).serialize(); // Set ``data:{}``:
    $.post(url, serialized, function(response) {
        //your callback here
        console.log(response);
    }, 'JSON');
});

此致，

Answer 2

我找到了解决我的问题的非常简单的方法。只需在 user/new.html.twig 中更改此行：

<form method="post">

对此：

<form method="post" action="{{ path('new') }}" >

模态表单未将新用户数据写入数据库

Form in modal is not writing new user data to Database

php

symfony

twig

symfony4