CODEWITHSUNDEEP
phpjqueryajax
user1138143
user1138143

Reputation: 81

jQuery Ajax: how to wait until *async* requests success

I am calling one jquery ajax request in my PHP code. This code fetch the data from database and export into the excel file. Once ajax request will success, i will get excel file popup download box. This feature is working fine in all browser.

Now, problem is when that jquery request is taking more time (7-8 minutes), excel file is created on the server, but download box is not popup and after 30 minutes i am getting timeout error.

what could be the problem, file is created on the server in 7 minutes but i am not getting any response from ajax request. I am also checked the timeout for ajax request it is set for 30 minutes.

Upvotes: 0

Views: 1941

Answers (2)

techfoobar
techfoobar

Reputation: 66663

Even if you manage to solve the timeout, making your clients wait 7 to 8 minutes without any progress feedback will be far from ideal. Better way would be to initiate the export on the server and return immediately. Once this returns you can give a progress message that says 'Export in progress..' or something. Then you can have an AJAX call that periodically checks the status of the export and returns the appropriate status message. Once exporting is done, you can change the progress feedback to 'Export complete: Download file' with Download file being a link to the excel file created on the server. you can also trigger a click on that link via code to automatically start the download.

i.e.

Assuming you have a DIV with class status which shows the export status

First AJAX call to initiate the export:

$.post({
  url: '/export/',
  ...
  success: function(data) {
    $('.status').html('Export in progress. Please wait...');
  }
});

Second AJAX call to poll export progress

$.post({
  url: '/exportstatus/',
  ...
  success: function(data) {
    if(data=='OK') {
       $('.status').html('Export complete: <a class="exportedfile" href="/path/to/exported/file">Download File</a>');
       setTimeout(function() {
          $('.status').find('a').click(); // trigger autostart of download
}, 1000);
    }
  }
});

Upvotes: 1

user684934
user684934

Reputation:

You're doing it wrong: you don't want to force a user to be stuck on a page for more than a few seconds at most in order to get service from your app.

Instead, use a widget that will periodically query a status page (with ajax, of course) and display a message when the job is done.

(What kind of excel file is taking 7 minutes to generate? A db dump?)

Edit:

Different browsers will behave differently with long ajax requests, so don't depend on them waiting around forever even if the user is willing to. Your app will be much more robust if you decouple requesting a report generation and downloading the report.

This should give you an idea of what I'm talking about:

create_my_excel_file.php:

$_SESSION['excel_status']='generating';
create_the_excel_file();
$_SESSION['excel_status']='finished';

check_status.php:

echo $_SESSION['excel_status'];

user_interface.php:

<script type="text/javascript">
function initiateRequest(){
    $.ajax('create_my_excel_file.php');
    setInterval('checkForCompletion()', 5000);
}
function checkForCompletion(){
    $.get('check_status.php', function(data){
        if('finished'==data){
            alert('Completed! Download the file now.');
            location.href='file_download.php';
        }
    });
}
</script>
<a href="javascript:initiateRequest();">Generate the file</a>

Upvotes: 0

Related Questions