Question

我使用django-crispy表单并在jquery对话框中使用它来显示表单向导。我面临的问题是，当在对话框中使用时，向导永远不会移动到下一个屏幕。

因此，我的向导定义如下：

class ContactWizard(SessionWizardView):
    def get_template_names(self):
        return "reviewdialog.html"


    def done(self, form_list, **kwargs):
        return HttpResponseRedirect('index')

模板定义为：

{% load crispy_forms_tags %}
{% load i18n %}

{% block content %}
<form action="." method="post">
    {% csrf_token %}
<table>
{{ wizard.management_form }}
{% if wizard.form.forms %}
    {{ wizard.form.management_form }}
    {% for form in wizard.form.forms %}
        {% crispy form %}
    {% endfor %}
{% else %}
    {% crispy wizard.form %}
{% endif %}
{% if wizard.steps.prev %}
<button name="wizard_goto_step" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
<button name="wizard_goto_step" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
{% endif %}
</table>
<input type="submit" class="btn btn-success" value = "NEXT">
</form>
{% endblock %}

现在，我在jquery对话框中显示了这一点，我在其中覆盖了submit方法，以确保单击“下一步”按钮时对话框不会关闭

<script>
        function EditDialog(pk) {
            $.ajax({
                url: "{% url 'populatereviewform' %}",
                method: 'GET',
                data: {
                pk: pk
            },
            success: function(formHtml){
                //place the populated form HTML in the modal body
                $('.modal-body').html(formHtml);
                $( "#dialog" ).modal({width: 500, height: 500});
            },
            dataType: 'html'
        });

            $('#dialog').submit( function(e) {
                return false;
            });

            return false;
        }
    </script>

AJAX部分只是使用一些数据填充表单，而dialog对象是标准的jquery modal对话框。表单显示在第一个屏幕上，并填充正确的值，但是当我按NEXT时，没有任何事情发生，因为向导没有转换。

urls.py配置为：

url(r'^review/(?P<pk>\d+)/$', views.ContactWizard.as_view([DummyForm, OtherForm]), name='review'),

Som，表单以DummyForm（ModalForm）开头，但不会进入下一个向导屏幕。我觉得这可能与我的javascript有关，但可能有点深入了解。

修改

所以，根据@ udi的回答，我尝试了以下内容：

$("#dialog").submit(function(e)
            {
                $.ajaxSetup({
                    beforeSend: function(xhr, settings) {
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken);
                        }
                    }
                });
                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");
                $.ajax(
                {
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data, textStatus, jqXHR)
                    {
                        $('.modal-body').html(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {
                        alert(errorThrown)
                    }
                });
                e.preventDefault(); //STOP default action
                e.unbind(); //unbind. to stop multiple form submit.
            });
            return false;
            }

但是，此处返回的数据不是向导的下一个屏幕，而是显示对话框的基础页面。那么，也许formURL或postdata变量未正确初始化？

向导屏幕的模板是：

{% load crispy_forms_tags %}
{% load i18n %}

{% block head %}
{{ wizard.form.media }}
{% endblock %}

{% block content %}
<form id="review-form" action="." method="post">
    {% csrf_token %}
<table>
{{ wizard.management_form }}
{% if wizard.form.forms %}
    {{ wizard.form.management_form }}
    {% for form in wizard.form.forms %}
        {% crispy form %}
    {% endfor %}
{% else %}
    {% crispy wizard.form %}
{% endif %}
{% if wizard.steps.prev %}
<button name="wizard_goto_step" class="btn btn-success" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
<button name="wizard_goto_step" class="btn btn-success" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
{% endif %}
</table>
<input type="submit" class="btn btn-success" value = "Hello">
</form>
{% endblock %}

Answer 1

您需要通过jQuery获取下一个表单的html并在对话框中更新它。

表单向导不会移动到jquery对话框中的下一个屏幕

1 个答案: