How do I get the browser to update before my next Javascript function is called?

Question

Hey all,

I'm having a bit of trouble getting the desired functionality from my function... Basically, I'm making two calls to AJAX functions (as provided by Oracle APEX, so I can't change these) but they're taking a while. I'd like to show the standard AJAXy spinning gif while the action was going on, but I'm not having much luck. Here's what I have so far:

function paginate(reportIDs, startRecord)
{
 //block access to the UI and show a "please wait" message
  $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } });

  //make the two AJAX calls to the APEX provided function
  for(var i = 0;i<reportIDs.length;i++)
  {
    $a_report(reportIDs[i], startRecord, ITEMS_PER_PAGE, ITEMS_PER_PAGE);
  }

  //clean up some APEX garbage on the page
  formatPage();

  //make the "please wait" message go away
  $.unblockUI;
}

The specific problem I'm having at the moment is that the blocking of the UI seems to only happen once the AJAX calls are complete. Then it never unblocks... Any ideas?

Answer 1

Assuming the calls are async - can you pass a callback in to the ajax report function or use another function or constant to set a callback? Otherwise youll have to poll for the response - how you would do that will depend on whats returned from $a_report and/or the api behind their ajax functionality.

If they arent async then it may be a typo or something. As the other poster suggest $.blockUI; should probably be $.blockUI();

Answer 2

Wrap your ajax in another method and delay that method by 1 ms

function paginate(reportIDs, startRecord)
{
    //block access to the UI and show a "please wait" message
    $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        }
    });
    setTimeout(function(){
        //make the two AJAX calls to the APEX provided function
        for(var i = 0;i<reportIDs.length;i++)
        {
            $a_report(reportIDs[i], startRecord, ITEMS_PER_PAGE, ITEMS_PER_PAGE);
        }

        //clean up some APEX garbage on the page
        formatPage();

        //make the "please wait" message go away
        $.unblockUI();
   }, 1);
}