【问题标题】:django bootstrap modal form closes on invalid form datadjango bootstrap modal form 关闭无效的表单数据
【发布时间】:2015-06-28 15:56:08
【问题描述】:

我正在使用 django + bootstrap modal 将 ModelForm 渲染到模态对话框。

我面临的问题是模式表单在我单击提交按钮后立即关闭,它在模式表单上显示错误但它关闭并且当再次打开模式对话框时可以看到错误。

我没有使用任何 javascript 或 jquery,我只是使用 html 标记并在 django 视图中处理帖子。

如果表单无效,请告诉我如何停止关闭对话框。

modaldialog_modelform.html:

此文件包含模式对话框的代码,其形式是从视图中呈现的。

<div class="modal fade in" id="NewRecordModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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" id="myModalLabel">Add New Transport</h3>
            </div>
            <div class="modal-body">
                <form action="" method="post">{% csrf_token %}
                    {% if form.errors %}<p class="form_field_error">Please correct the following fields</p>{% endif %}
                    {{ form|crispy }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" alt="Add Transport" value="Add Transport" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>

上面的对话框是从 transport.html 调用的,代码如下:

<a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#NewRecordModalForm" data-backdrop="static">  
    <i class="fa fa-plus"></i>  
</a>

【问题讨论】:

  • 请出示您的代码。
  • 添加了模态对话框的代码,表单工作正常,但如果出现错误,则关闭。

标签: django twitter-bootstrap django-forms bootstrap-modal


【解决方案1】:

似乎页面只是重新加载,并且在两种情况下都在重新加载...您需要通过单击提交按钮向服务器发送 ajax 请求(javaScript 代码),这是使用 jQuery jQuery AJAX submit form 的最简单方法

【讨论】:

    猜你喜欢
    • 2017-12-04
    • 1970-01-01
    • 2023-03-16
    • 2020-02-09
    • 2016-06-08
    • 1970-01-01
    • 2014-03-17
    • 1970-01-01
    • 2020-10-13
    相关资源
    最近更新 更多