Jquery loading image until download starts
I´m trying to have a loading image while waiting for the server to generate a PDF.
When PDF is generated a browser dialog is prompted and that´s when the loading image should hide.

    $.ajax({
      type: 'POST',
      url: $(this).attr('href'),
      success: function(response)
      {
       console.log( response );
       $(".report-generator").submit();
      },
     }
    });

So this code is working.. kind of.. the loading image is shown but only for a short period of time.. the ajax call ends before the file is sent to the user.

This code shows the ajax loader when ever a ajax function is called

    function initAjaxLoader() {
        $(document.body).ajaxStart(function() { 
            $('#ajax-loader').show();
        }).ajaxStop(function() {
            $('#ajax-loader').hide();
        });
    }

So how do I keep the ajax call "active" until the download is prompted?
Jquery loading image until download starts
===

I´m trying to have a loading image while waiting for the server to generate a PDF.
When PDF is generated a browser dialog is prompted and that´s when the loading image should hide.

    $.ajax({
      type: 'POST',
      url: $(this).attr('href'),
      success: function(response)
      {
       console.log( response );
       $(".report-generator").submit();
      },
     }
    });

So this code is working.. kind of.. the loading image is shown but only for a short period of time.. the ajax call ends before the file is sent to the user.

This code shows the ajax loader when ever a ajax function is called

    function initAjaxLoader() {
        $(document.body).ajaxStart(function() { 
            $('#ajax-loader').show();
        }).ajaxStop(function() {
            $('#ajax-loader').hide();
        });
    }

So how do I keep the ajax call "active" until the download is prompted?