Question

当使用带有Bootstrap Modal的Django提交单选按钮选择时，该模式不希望随提交内容一起关闭。它将继续提交到views.py中的视图，但不会关闭。

更改名称以使其不会出现在视图中时，模态会关闭。

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

主要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)

Answer 1

我可以通过为模式添加超时来解决此问题。

在我的html文件中，将modal-auto-clear添加到modal类中，并在10秒钟后关闭data-timer =“ 10000”。

<!-- 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>

提交时Django Close Bootstrap Modal

1 个答案: