Django 在提交时关闭引导模式答案

【问题标题】：Django Close Bootstrap Modal On SubmitDjango 在提交时关闭引导模式
【发布时间】：2019-02-26 19:01:56
【问题描述】：

当使用带有 Bootstrap Modal 的 Django 来提交单选按钮选择时，该模式不想随着提交而关闭。它继续提交到views.py 中的视图，但不会关闭。

当更改名称以使其不进入视图时，模式会关闭。

我尝试了其他帖子中的许多建议，包括this one。

主要的html

<!DOCTYPE html>
{% load static %}
<html>

<body>
    <div id="spacer">
    </div>
    <div style="padding-left:20px;">
        <button type = "button" class="btn" data-toggle="modal" data- 
target="#filetypeModal">Get Device Data</button>
    </div>
    <!-- File Type Modal -->
    <div class="modal fade" id="filetypeModal" tabindex="-1" role="dialog" aria-labelledby="filetypeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <form action="" method="post" id="getAPI">
                    {% csrf_token %}
                    <div class="modal-header" style="background-color: darkblue; color: white">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">&times;</button>
                        <h4 class="modal-title" id="filetypeModalLabel">File Types</h4>
                    </div>
                    <div class="modal-body" style="text-align: center;">
                        Choose file type to download.<br>
                        <br>
                        <label class="radio-inline"><input type="radio" name="choices" value="Excel" checked>Excel</label>
                        <label class="radio-inline"><input type="radio" name="choices" value="CSV">CSV</label>
                    </div>
                    <div class="modal-footer" style="background-color: darkblue;">
                        <button type="submit" class="btn btn-primary" value="OK" name="getAPIsubmit">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">

views.py

def tasks(request):

    if request.POST.get('getAPIsubmit'):
        request.session['choice'] =  request.POST.get("choices")
        response = INDget.indget(request)
        return response
    return render(request, 'tasks.html')

def Download_file(request, fname):
    import ntpath
    from wsgiref.util import FileWrapper
    wrapper = FileWrapper(open(fname, 'rb'))
    response = HttpResponse(wrapper, content_type = 'application/vnd.ms-excel')
    response['Content-Disposition'] = 'attachment; filename=' + ntpath.basename(fname)
    return response

解决方案...

添加到views.py

def reload_tasks(request):
    return render(request, 'tasks.html')

在我的 API 脚本结束时...

from main.views import Download_file
from main.views import reload_tasks

choice = request.session['choice']

if choice == "Excel": Download_file(request, './INDmain/IND_data.xlsx')
if choice == "CSV":  Download_file(request, './INDmain/IND_data.csv')

return reload_tasks(request)

【问题讨论】：

您的表单是否使用 AJAX 提交？如果是这样，您能否也向我们提供该代码？
我没有使用 AJAX 提交表单。使用上面的代码和 Django 中的提交按钮将数据传递到 views.py 中的任务视图并按预期进行，最后以所选格式的 API 返回的数据的文件下载结束。
我很困惑，因为看起来您的任务视图正在处理表单，然后呈现新模板。当页面重新加载时，您的模式不会关闭吗？
我建议将 url 添加到表单中：action="{% url 'app:my_url' %}"
执行API代码后，以getAPIsubmit if语句中的返回响应开始，代码返回views.py中的Download_file函数。它的响应是文件的下载。我想不出用返回渲染重新加载 tasks.html 页面的方法。

标签： django

【解决方案1】：

我能够通过为模式添加超时来解决这个问题。

在我的 html 文件中添加 modal-auto-clear 到 modal 类和 data-timer="10000" 以在 10 秒后关闭。

<!-- File Type Modal -->
<div class="modal fade modal-auto-clear" data-timer="10000" id="filetypeModal" tabindex="-1" role="dialog" aria-labelledby="filetypeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form action="" method="post" id="getAPI">
                {% csrf_token %}
                <div class="modal-header" style="background-color: darkblue; color: white">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">&times;</button>
                    <h4 class="modal-title" id="filetypeModalLabel">File Types</h4>
                </div>
                <div class="modal-body" style="text-align: center;">
                    Choose file type to download.<br>
                    <br>
                    <label class="radio-inline"><input type="radio" name="choices" value="Excel" checked>Excel</label>
                    <label class="radio-inline"><input type="radio" name="choices" value="CSV">CSV</label>
                </div>
                <div class="modal-footer" style="background-color: darkblue;">
                    <button type="submit" class="btn btn-primary" value="OK" name="getAPIsubmit">OK</button>
                </div>
            </form>
        </div>
    </div>
</div>

然后添加 jscript...

<script>
    $('.modal-auto-clear').on('shown.bs.modal', function () {
        // if data-timer attribute is set use that, otherwise use default (7000)
        var timer = $(this).data('timer') ? $(this).data('timer') : 7000;
        $(this).delay(timer).fadeOut(200, function () {
            $(this).modal('hide');
        });
    })
</script>

【讨论】：