I have a Laravel project that uses jQuery and PusherJS. When I press a button I make an ajax call and create a CSV file that triggers an ExportHasFinished event. This event broadcasts the results to JS using Pusher. In the frontend, I see a card that is announcing me when the file is ready to download. All this works in my export page. What I am trying to achieve is keep the download running in the background as Google Drive does, and be able to access other pages while this happens.
The HTML for the download card is in the layout file and the JS is included in the header so it's accessible on all the other pages. In my export page, I unhide the download card, but when I go to another page the card is hidden and the export is no longer running. Is there any way I can achieve this?
Here is the code for Pusher:
var pusher = new Pusher(pusherKey, { cluster: 'eu' });
var channel = pusher.subscribe('export.' + loggedInUser);
channel.bind('App\\Events\\ExportHasFinished', function(data) {
if(data.fileURL) {
// change the text of the download card
downloadCard.find('.card-header').html('Ready for download');
downloadCard.find('.card-subtitle').html('Your download will start soon.');
// remove download card
setTimeout(function( ) { downloadCard.fadeOut('slow'); }, 2000);
// download file
window.open(data.fileURL, '_self');
}
else {
downloadCard.find('.card-subtitle').html('There was an error.');
}
});
And here is the code for the Ajax call:
$('.export-all').on('click', function(e) {
e.preventDefault();
$.ajax({
async: true,
method: "POST",
url: exportAllAjaxUrl,
data: { _token: CSRF_TOKEN, company_id: companyId, dataType: dataType },
success: function(data) {
if(data) {
}
},
error: function(xhr, status, error) {
if(xhr.responseJSON) {
alert(xhr.responseJSON.errors)
}
},
});
});
Thank you!