0

I have been through pretty much every post on this forum and have not been successful at getting my modals to close after submission. data-dismiss does not work since it stops the submission before it starts. Using JavaScript code within the base html page also has not worked. Examples of posts that I have tried are here and here.

My code is below. Any recommendations are appreciated. Submission is working. Modal just will not close. See modal "getAPI" below for example.

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<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">
                    {% 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;">
                        <input type="submit" class="btn btn-primary" id="getAPI" value="OK" name="getAPI"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
    $("#getAPI").submit(function() {
        $("#filetypeModal").modal("hide");
    });
</script>

rjs
  • 1
  • 6

2 Answers2

1

Something that might be of benefit: Create button as proposed:

<button type="button" id="closeModal" class="btn btn-danger" data-dismiss="modal">Close</button>

and use 

$("#getAPI").submit(function() {
   $("#closeModal").click(event =>{
    alert('Success');
   });
});
polux
  • 98
  • 1
  • 14
1

You should declare form id on form element not in button and it should work.

<form id="getAPI">
[...]
</form>

And declare button type to submit to declare it as submit button to catch submit event.

<button type="submit" .....>Save</button>

In JavaScript, you should prevent default form submission.

<script>
    $("#getAPI").submit(function(event) {
    $.ajax({
        url: '/',  // your url endpoint
        type: 'POST',
        data: $('#getAPI').serialize(),  // gather form data
        success: function(data) {
                console.log(data);
                $("#filetypeModal").modal("toggle");  // Use toggle to close modal
        }  // end success callback
     });  // end ajax call
    event.preventDefault();  // prevent default submission
    });

</script>

If you are handling form submit using jQuery event, form method type and action url in <form> element is redundant unless you are using DOM somewhere.

Debendra
  • 1,132
  • 11
  • 22
  • This does close the modal, but does not complete the submission. – rjs Feb 26 '19 at 14:51
  • Are you using ajax for submission? – Debendra Feb 26 '19 at 14:54
  • You should close the modal after form submission completes. See my updated answer for gist. – Debendra Feb 26 '19 at 15:01
  • Now doing the submission but not closing the modal. – rjs Feb 26 '19 at 15:12
  • Does submission log data to the console? – Debendra Feb 26 '19 at 15:19
  • Yes, a warning. But only about the data type for the file download. -- Resource interpreted as Document but transferred with MIME type application/vnd.ms-excel: "http://127.0.0.1:8000/tasks/". – rjs Feb 26 '19 at 15:25
  • However, upon page load and error occurs. -- Uncaught SyntaxError: Unexpected token ; details: $.ajax({ url: '/', // your url endpoint type: 'POST', data: $('#getAPI').serialize(), success: (function(data) { $("#filetypeModal").modal("toggle"); // Use toggle }); *** Doesn't like this! sees it as an unexpected token. – rjs Feb 26 '19 at 15:28
  • Answer updated. Sorry I mistakenly added `;`. remove `;` at ajax callback end. Thanks – Debendra Feb 26 '19 at 15:32
  • Still not closing... Still have an error at page load. (index):128 Uncaught SyntaxError: Unexpected identifier. details: $.ajax({ url: '/', // your url endpoint type: 'POST', data: $('#getAPI').serialize(), success: (function(data) { $("#filetypeModal").modal("toggle"); // Use toggle }) event.preventDefault();*** occurs here *** – rjs Feb 26 '19 at 15:38
  • I updated my answer. Again I mistakenly added `(` in ajax success callback. remove `(` from success callback function and also at end too `)`. – Debendra Feb 26 '19 at 15:51
  • Ok, now a new error. POST http://127.0.0.1:8000/ 500 (Internal Server Error) send @ jquery-1.10.2.min.js:6 ajax @ jquery-1.10.2.min.js:6 (anonymous) @ (index):125 dispatch @ jquery-1.10.2.min.js:5 v.handle @ jquery-1.10.2.min.js:5 – rjs Feb 26 '19 at 16:17
  • There is error in your server. What is error output in terminal console. – Debendra Feb 26 '19 at 16:26
  • It is trying to do the post before going to my views.py. I think it is trying to post to the database but doesn't have the session username or password. It is showing the len(username)<5, which is part of the validation of the login screen in forms.py. – rjs Feb 26 '19 at 16:45
  • So there no issue with my code. Its your server error. Mark question as resolved if if you found helpful. – Debendra Feb 26 '19 at 16:47
  • It appears that the ajax script is bypassing django. It should be going directly back to views.py and the tasks url where the choice is posted before moving on to the execution of the API. 'code' def tasks(request): if request.POST.get('getAPI'): request.session['choice'] = request.POST.get("choices") response = INDget.indget(request) return response – rjs Feb 26 '19 at 16:51
  • Bro this is your server issue not the javascript which doesn't relates the question you asked. Open another question for your error and mark this question as resolved. Thanks – Debendra Feb 26 '19 at 16:54
  • My question is related to both javascript and django...Getting it to work in django is the issue...If it was purely an html javascript issue I would not have the issue or the question. – rjs Feb 26 '19 at 16:55
  • Your server error is encountered recently, and completely not related to the question as you asked above. Please open another question – Debendra Feb 26 '19 at 16:59