0

I have a page on a website where you can download files that you previously paid for. The file is a zip archive that contains many pdf files. When the download link is clicked, a php file is called that does some work (adding stamp on the pdf's) before the file is served. Because this can take some time on larger files, I'v build in a polling mechanism to show the user what is happening. The polling is done through an ajax call that looks like this:

$('.rm-table').on(clickhandler,'.fa-download', function(e){

    tr = $(this).closest('tr');
    id = tr.attr('id');
    tr.find("progress").show();
    tr.find('.downloadstatus').show();
    tr.find('.downloadstatus').html('Start Download...');
    setTimeout(getDownloadStatus(), 250);
});

function getDownloadStatus(){
    setTimeout( function() {
        $.ajax({
        url: '/process/{{Auth::id()}}/'+id,
        type: 'POST',
        async: true,
        cache: false,
        data: {},
        dataType: "json",
        success: function(data, textStatus, jqXHR)
        {
                var tekst = data.tekst;
                var perc = data.percentage;

                 tr.find('.downloadstatus').html(tekst);
                 tr.find('progress').val(perc);

                 if(tekst != 'done'){
                    getDownloadStatus();
                 } else {
                    tr.find('.downloadstatus').html("Done!");
                    tr.find('progress').val(100);
                            setTimeout(
                              function() 
                              {
                                tr.find('progress').val(0);
                                tr.find('progress').hide();
                                tr.find('.downloadstatus').html("");
                                tr.find('.downloadstatus').hide();
                              }, 750);

                 }
        },
        error: function(jqXHR, textStatus, errorThrown) {

                var response = jQuery.parseJSON(jqXHR.responseText);
                    alert(response.error);
        }
        });
      }, 250);         
}

The polling is done after the user clicks the link. So the default behaviour of the link is not prevented.

This works fine on all browsers on Windows, but the polling is somehow not started on Safari on a mac, or even other browsers on an ipad. Anyone any idea of what may be the problem?

HarmJan
  • 26
  • 2
  • What is clickhandler in this line `$('.rm-table').on(clickhandler,'.fa-download', function(e){`? – Pankaj Makwana Jun 27 '17 at 12:12
  • var clickhandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click"); For detecting click or touch – HarmJan Jun 27 '17 at 12:15
  • 1
    Have you tried the `onprogress` event available in `XMLHttpRequest`? https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest – Professor Abronsius Jun 27 '17 at 12:19
  • I have not, but it seems that would require the call for the zip file to go through javascript as well. I would rather have the call for the file itself to not need javascript. So i was hoping there would be another solution. I'll give it a look though. – HarmJan Jun 27 '17 at 12:30

1 Answers1

0

ok, so the problem was that Safari unlike browsers on windows, seems to stop al javascript activity on a page when a link is clicked. So while the 'other page' is still loading, whether it is a redirect or download, ajax polling is not possible. I solved it by having the file be requested through ajax as well. Still allowed fallback in case javascript is not available, if that may ever be the case.

HarmJan
  • 26
  • 2