Question

In js (jquery 1.7) I use this code: When clicking on button two actions are supposed to happen: 1. show status (show html) 2. run function to generate pdf

$( "#create_box" ).on("click", "#make_pdf_btn",function(){
$('.pdf_status0').html('Generating report...' );  // problematic line
 make_pdf2();
 return false;
  });

then:

function make_pdf2(){
    $.ajax({
            type: "GET",
            url: "make_pdf.php",   // pdf is created and saved
            async: false,          // synchronous  ajax
            success: function(html){ strReturn = html; }
    });

   if ( strReturn == 'pdfok' ){ 
        $('.pdf_status0').html('Done!<br>');
        $('.pdf_status').show();
       } else {
         $('.pdf_status').html('Error creating pdf.' );  
       }
  return false;      

}

Problem is that line $(‘.pdf_status0’).html(‘Generating report…’ ); is running ok in firefox and text ‘Generating report …’ is shown in div, then it is replaced with ‘Done!’.
However Chrome and IE8 don’t show ‘Generating report..’ only ‘Done!’ and pdf is created.

if i use alert(‘text’) instead of jquery html it is run and alert is shown in ie, chrome and firefox

Answer 1

When you do a synchronous ajax call it usually locks up the browser until the response is processed, which means the screen isn’t repainted to show your “Generating report…” message until after it’s too late because you’ve already changed it to “Done!”.

There’s almost never a good reason to use synchronous ajax, and I can’t see anything in your code that can’t be easily refactored to be asynchronous – which gives the browser a chance to repaint while the ajax call is in progress:

function make_pdf2(){
    $.ajax({
            type: "GET",
            url: "make_pdf.php",   // pdf is created and saved
            async: true,          // use Asynchronous  ajax
            success: function(html){
               // do all required processing on response in the success callback
               strReturn = html;
               if ( strReturn == 'pdfok' ){ 
                  $('.pdf_status0').html('Done!<br>');
                  $('.pdf_status').show();
               } else {
                  $('.pdf_status').html('Error creating pdf.' );  
              }
           }
    });

  return false;      
}

Having said that, I’ve occasionally that found older IE (not sure about IE8) still gets a bit confused in a way that can be fixed with a setTimeout() hack:

setTimeout(make_pdf2, 4); // make call to make_pdf2() async too