Question

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

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);
}