Question

我有list.html.twig中显示的学校列表。对于每个学校，我需要插入一些填写在模态内的表格中的数据。我需要在填写表单后，提交并关闭模态，再次显示背景页面。通常情况下，模态的提交操作会导致页面刷新，我想明显避免这种情况。

代码的灵感来自this tutorial，特别是我遵循了表单的创建......

    //school controller 
    $school = new School();
    $form = $this->createForm(
        new SchoolFormType($param),
        $school,
        array(
            'action' => $this->generateUrl("school_modal_vp", array(
                'param' => $param,
            )),
            'method' => 'POST'
    ));

    if($request->isMethod('POST')) {
        $form->handleRequest($request);
        if($form->isValid()) {
            $data = $form->getData();
            $em->persist($data);
            $em->flush();
            $response = new Response(json_encode([
                'success' => true,
            ]));
            $response->headers->set('Content-Type', 'application/json');

            return $response;
        }
    }

...以及用表单数据“AJAX”调用“替换”模态的提交操作，将其存储到数据库并关闭模态的函数。

<script>
var param_id = '{{ param.id }}';

function sendForm(form, callback) {
    // Get all form values
    var values = {};
    $.each( form[0].elements, function(i, field) {
        if (field.type != 'checkbox' || (field.type == 'checkbox' && field.checked)) {
            values[field.name] = field.value;
        }
    });
    // Post form

    console.log(values);
    $.ajax({
        type        : form.attr( 'method' ),
        url         : form.attr( 'action' ),
        data        : values,
        success     : function(result) { callback( result ); }
    });
}

$(function() {
    $("#school_"+param_id+"_save").on("click", function( e ) {
        e.preventDefault();
        sendForm($("#myModalSchool_" + param_id).find('form'), function (response) {
            $("#myModalSchool_" + param_id).modal('hide');
        });
    });
});
</script>

但是，这仅适用于列出学校时创建的最后一个模式。如果您需要详细信息，请提供任何帮助。

编辑1：

这是所要求的模板

<div class="modal fade" data-backdrop="static" id="myModalSchool_{{ param.id }}">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h3 class="modal-title">
                School
            </h3>
        </div>
        <div class="modal-body">
            <form id="school_{{ param.id }}" name="school_{{ param.id }}" method="post" action="{{ path('school_modal_vp', {param_id: param.id, }) }}" class="form-horizontal">
                {{ form_errors(form) }}
                {{ form_rest(form) }}
                {{ form_end(form) }}
        </div>
    </div>
</div>

Answer 1

我认为主要问题是var param_id = '{{ param.id }}';，它是在您的javascript中手动定义的。

首先，我建议您在每个按钮上的所有保存按钮（例如modal-submit）和data-id上添加一个课程。

示例：

<button type="button" class="btn btn-primary modal-submit" data-id="{{myData.id}}">Submit</button>

然后在点击保存按钮（包含modal-submit）时在您的javascript中，您从data-id检索ID并执行sendForm($("#myModalSchool_" + param_id).find('form'),...。

示例：

$(function() { $(".modal-submit").on("click", function( e ) { e.preventDefault(); var param_id = $(this).attr('data-id'); sendForm($("#myModalSchool_" + param_id).find('form'), function (response) { $("#myModalSchool_" + param_id).modal('hide'); }); }); });

修改

多次保存问题？

此外，我认为你在每个模态中定义了上面的javascript。这就是多次调用save的原因。你只需要有一个这个javascript的实例（所以它不能放在你的模态视图中）。尝试将javascript放在全局布局中。

希望它会有所帮助

没有使用数据提交带有symfony2和jquery的模态表单

1 个答案: