django表单向导ajax下一步

时间:2013-07-24 07:05:14

标签: ajax jquery django-forms django-formwizard

我正在使用django表单向导创建一个9步提案表单。一切都很好,直到我想用ajax加载下一步。我很难在jquery中配置ajax调用,因为django表单没有包含在表单标记中的动作URL。为什么这样呢?对我来说,一个双赢的局面是下一步有一个加载屏幕,如果步骤中有上传文件进程,则显示上传文件的加载百分比。谢谢!

2 个答案:

答案 0 :(得分:1)

我正在使用此代码,它对我有用。正如你所看到的,我没有在表单中添加任何操作。当表单被提交时,我使用jquery'on'函数,因为所有表单都在div#creation中重新加载和更改。然后ajax网址必须是显示表单的网址。

在我的情况下,当我点击某个按钮时,表单的第一步也通过带有get的ajax呈现。这就是为什么div中没有​​任何形式的原因。 (我正在使用bootstrap的模态)。

<div id="creation">
    <!-- form to be display through ajax -->
</div>

在视图中的FormWizard类中重新加载的模板是以下html:

template_name = 'creation_form.html'

Code por creation_form.html:

<form id="creation-form" action="#" method="post">
    {% csrf_token %}
    <table>
        {{ wizard.management_form }}
        {{ wizard.form }}
    </table>

    {% if wizard.steps.prev %}
        <button name="wizard_goto_step" class="btn btn-primary" aria-  hidden="true"    type="submit" value="{{ wizard.steps.first}}">First</button>
        <button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
    {% endif %}
    <input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>

这是我的ajax电话:

$('#creation').on('submit', '#creation-form' , function(e){
    e.preventDefault();
    var fd = new FormData($('#creation-form').get(0));
    $.ajax({
      url: '/create/',
      data: fd,
      type: "POST",
      success: function(data){
            $('#creation').html(data);
          },
      processData: false,
      contentType: false
    });
});

希望这是对你答案的恰当回应。

我目前很难进入上一步/上一步,如果你搞清楚,请告诉我如何。

这是你在找什么?

答案 1 :(得分:1)

这就是我做的 -

  1. 为每个步骤创建单独的模型表单。这有助于简化服务器端验证。
  2. 使用ajax调用每个步骤来验证服务器端的表单,并在成功时呈现下一个表单并隐藏上一个表单。
  3. 提交上一个表单async POST持久化和处理数据,并在最后一步下异步呈现响应。
  4. 还为每个步骤维护了一个进度条。
  5. 这是我使用django表单创建异步表单向导的方法。不整洁但有效! :)