How to catch a Django "GET" event in template using jquery?

Question

In my Django project, I have a pdf download button that generates a report. When I push the button I would like a modal showing that the report is being processed. When the pdf is downloaded, I would like the modal to hide automatically.

However, I am having some trouble with the last part. I know that Django sends a "GET" message in the backend, when the report is downloaded ("GET /download/140/...")

How can I "catch" the ("GET /download/140/...") event in my template?

Code:

<a href="{% url 'report-download' object.id %}" class="btn btn-grey" id="pdf-button"></a>

Show "processing" modal when download is initiated...

<script type="text/javascript">
$("#pdf-button").on("click", function(){
    $('#myPDFModal').modal('show');
});
</script>

Attempt: Close "processing" modal when download is finished using Ajax...

<script type="text/javascript">
$(document).on('click', '#pdf-button', function(event)
{
    event.preventDefault();
    $.ajax({
        url: '{% url 'report-download' object.id %}',
        type: 'GET',
    }).done(function(result) {
        $('#myPDFModal').modal('hide');
    });
});
</script>

The above code seems to work at showing/hiding the modal at the right "GET" event, but the pdf is not downloaded..

Igonato · Accepted Answer · 2021-03-12T08:19:41.893

You can add download and target="_blank" to your pdf link.

<a 
    href="{% url 'report-download' object.id %}" 
    class="btn btn-grey" 
    id="pdf-button"
    download="SuggestedFilename.pdf"
    target="_blank"
></a>

This will allow the file to appear in downloads without messing up the page location (that's my understanding of what you're trying to accomplish).

Next, in the onclick handler remove event.preventDefault() - that will make the link work again. And the .ajax call is no longer needed. So what's left is just .modal('hide'):

<script type="text/javascript">
$(document).on('click', '#pdf-button', function(event) {
    $('#myPDFModal').modal('hide');
});
</script>

And on those GET messages - that's your server's log. There is no way (for security, amongst other reasons) to access it from the front end. You can only wait for a reply from the server if you initiated the request (that's what you were doing with the .done(...) part of the ajax call).

And if you insist on doing an "ajax-like" download, see this answer: Download a file by jQuery.Ajax

Thanks for the answer. Actually I just want to close the modal box when the download is finished. I dont care if its Ajax or Javascript. I tried your solution but the .modal('hide') is initiated imididiately after i push the download button. What I want is to initiate .modal('hide') when the download is finished. — Frederik Petri, Mar 12 '21 at 09:03
I see, have you tried the example from the answer I've linked? (you should replace your `$.ajax(...)` with that `fetch(...).then(...)` and hide the modal in place of the `alert(...)`) — Igonato, Mar 12 '21 at 09:28

How to catch a Django "GET" event in template using jquery?

1 Answers1