Django Close Bootstrap Modal On Submit

Question

When using Django with a Bootstrap Modal to submit a radio button choice, the modal does not want to close with the submission. It proceeds with the submission to the view in views.py but does not close.

When changing the name so that it does not go to the view the modal does close.

I have tried many of the suggestions from other posts including this one.

main 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

Solution...

added to views.py

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

At the end of my API script...

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)

Does your form submit with AJAX? If so, could you please provide us with that code as well? — Sam, Feb 26 '19 at 19:18
I am not submitting the form with AJAX. With the code above and in Django the submit button passes the data to the tasks view within views.py and proceeds as expected, ending with a file download of the data returned by the API in the selected format. — rjs, Feb 26 '19 at 19:25
I'm confused, because it looks like your tasks view is processing the form and then rendering a new template. Doesn't your modal close when the page reloads? — Sam, Feb 26 '19 at 19:42
i suggest add the url into form: action="{% url 'app:my_url' %}" — Diego Avila, Feb 26 '19 at 20:07
After executing the API code, started by the return response in getAPIsubmit if statement, the code returns to the Download_file function in views.py. It's response is the download of the file. I can't figure out a way to reload the tasks.html page again with a return render. — rjs, Feb 26 '19 at 20:12
Diego, I just tried your suggestion. Downloaded the file but did not close the modal. Thx — rjs, Feb 26 '19 at 20:18

rjs · Answer 1 · 2019-02-28T18:04:12.070

I was able to solve this with adding a timeout for the modal.

In my html file added modal-auto-clear to modal class and data-timer="10000" to close after 10 secs.

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

Then add 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 On Submit

1 Answers1