ajax 请求在 css 弹出窗口中形成

Question

来自法国...对不起我的英语...

我在 symfony 3 中编写代码。我有一个实体 "book"，根据 "type" 属性 selected，一个或多个属性（客户、学生、组织者和/或演讲者）每个映射为一个实体 "user"。在我的 "book" 表单中，我可以 select 为每个与 "user" 我在 bdd 中注册的用户相关的属性。我想通过打开弹出窗口 css 添加一个 "user"，加载我的用户表单并用 ajax 保存它。如果成功，我会用 ajax 为我的列表充值，以便在我的“预订”表格中使用。

function nouveauOrganisateur() {
    $.ajax({
        url : Routing.generate('user_new'),
        success: function(html) {
            $('#NewOrganisateur').append(
                $(html).find('form')
            );
            $('div#NewOrganisateur form button').replaceWith(
                $(
                    '<button onclick="EnregistrerClient(event)">Enregistrer</button>'
                )
            );
        }
    });
}


function EnregistrerClient( event ) {
    console.log(event.target.nodeName);
    var $form = $( event.target ).closest( 'form');
    $.ajax({
        url : Routing.generate('user_new'),
        type: 'post',
        success: function(html) {
            console.log(html);
        }
    })
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="UserOrganisateur" class="label">
    <strong>{{ form_label(form.Stage.organisateurs, "Organisateurs ") }}</strong>
    {{ form_errors(form.Stage.organisateurs) }}
    {{ form_widget(form.Stage.organisateurs) }}
    <button onclick="nouveauOrganisateur()">Ajouter un Nouveau client</button>
    <div id="NewOrganisateur">
        {{ form_errors(form.Stage.NewOrganisateur) }}
        {{ form_widget(form.Stage.NewOrganisateur, {'value' : false}) }}
    </div>
</div>

当我验证我的表单 "user" 时，我的页面被重新加载，但这不是我想要的。而我的用户没有注册！？我从 javascript 开始。你能帮帮我吗？

从我的表单中，我有一个 "select" 类型。当 "type" 被 select 编辑时，多亏了 FormEvents 和一个 js 脚本，我加载了表单的其余部分。例如，如果我的 "type" 是 "training"，我加载嵌入式实体培训表格。我的 "training" 实体包含 "organizer" 属性和 "speaker"，2 个多个 select 选项是存储在 BDD 中的 "user"。在这个表单中，我添加了一个按钮来记录一个新的"user"。此按钮显示要使用的注册表单，其中我将提交按钮替换为 Ajax 操作按钮。我只想注册我的新用户并为我的 select 列表（"organizer" 和 "speaker"）充值，但是当我单击最后一个按钮时，我的页面来自哪里 select "type".

稍作改动，我可以注册我的新用户

function nouveauOrganisateur() {
    $.ajax({
        url : Routing.generate('user_new'),
        success: function(html) {
            console.log(html);
            $('#NewOrganisateur').append(
                $(html).find('form')
            );
            $('form[name=user] button').replaceWith(
                $(
                    '<button>Enregistrer</button>'
                )
            );
            $('form[name=user] button').on("click", function(){
                $.ajax({
                    url : Routing.generate('user_new'),
                    type: 'post',
                    data: $('form[name=user]').serialize(),
                    success: function(html) {
                        console.log(html);
                    }
                });
            });
        }
    });
}

但是我的页面总是重新加载???

Answer 1

我认为您试图阻止页面在用户单击按钮时重新加载或更改。可能有两种解决方案：

1.) <button> html 标签默认为 type="submit" 提交表单。您可以通过添加 type="button"

来避免这种情况

或

2.) 在 javascript 函数中 EnregistrerClient 在函数顶部添加一行 event.preventdefault(); 这将停止提交表单。

ajax 请求在 css 弹出窗口中形成

ajax request to form in css popup

javascript

forms

ajax

jquery

symfony-forms