Apex 3.2 hook javascripts to IR and execute those when report is refreshed

Question

Hi,
You propably have see tricks to attache javascript to IR refresh using time out and gReport.l_LastFunction e.g. these.
http://roelhartman.blogspot.com/2010/04/alternative-to-alternating-row-colors.html
http://www.talkapex.com/2009/03/column-groups-in-apex-interactive.html
Here is alternative solution:
You need load jQuery 1.4.2 e.g. in page template header
Create page zero if your application do not have one. Then create HTML region before footer with no template.
Place code to region source
<script type="text/javascript">
;(function($){
$.htmldbIrBusyGrap=$.fn.htmldbIrBusyGrap=function(){
/* for bind IR ajax */
/* check do we have IR on page */
if($('#apexir_WORKSHEET_REGION').length>0){
  /* replace apex internal function _BusyGraphic */
  gReport._BusyGraphic=function(pState){
   if(pState==1){
    /* ir ajax start trigger htmldbIrAjaxStart event and show loading icon */
    $.event.trigger('htmldbIrAjaxStart');
    $('#apexir_LOADER').show();
   }else{
    /* check is there data stored to #apexir_WORKSHEET */
    if(!$('#apexir_WORKSHEET').data('htmldb')){
      /* store data to #apexir_WORKSHEET */
      $('#apexir_WORKSHEET').data('htmldb',{irReady:true});
      /* trigger htmldbIrReady event */
      $.event.trigger('htmldbIrReady');
     /* hide loading icon and trigger htmldbIrAjaxEnd*/
     $('#apexir_LOADER').hide();
    $.event.trigger('htmldbIrAjaxEnd');
   return;
  $.event.trigger('htmldbIrReady');
$.htmldbIrReady=$.fn.htmldbIrReady=function(fn){
$(function(){
  if($.isFunction(fn)&&$('#apexir_WORKSHEET_REGION').length>0){
   $('#apexir_WORKSHEET_REGION').bind('htmldbIrReady',fn);
})(jQuery);
addLoadEvent(function(){$.htmldbIrBusyGrap();});
</script>Now your IR will trigger htmldbIrReady event when report is refreshed.
Usage example
<script>
$(function(){$('#foo').bind('htmldbIrReady',function(){alert('Hello');});});
</script>Also it trigger htmldbIrAjaxStart and htmldbIrAjaxEnd events.
Usage example
<script>
$(function(){$('#foo').bind('htmldbIrAjaxStart',function(){alert('Ajax start');});});
$(function(){$('#foo').bind('htmldbIrAjaxEnd',function(){alert('Ajax end');});});
</script>Or use function $.htmldbIrReady example
<script>
$(function(){$.htmldbIrReady(function(){alert('Hello');});});
</script>Small demo that logs those events here
http://actionet.homelinux.net/htmldb/f?p=100:87
Hope this helps and you post other innovative solutions or usage examples about this
Regards,
Jari

Answer 1

Jari,
i have found my bug which prevented the Page from working.
i have a custom build apex_loader
<script src="#WORKSPACE_IMAGES#jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="#APP_IMAGES#jquery.simplemodal-1.3.5.js" type="text/javascript"></script>
<script type="text/javascript">
* @param pRegionStaticId ID of region to set to modal
* @param pOptions Options for modal Screen. See: http://www.ericmmartin.com/projects/simplemodal/#options for more info
goModal=function(pRegionStaticId, pOptions){
  var vDefaults = {persist: true, overlayCss: {backgroundColor: '#606060'}}; // Note: It's important that you leave the persist = true otherwise items values will be cleared
  pOptions = jQuery.extend(true,vDefaults, pOptions);
  // To maintain order of APEX items (see forum posting above)
  $('#' + pRegionStaticId).wrap('<div></div>');
  // toon het ajax laad scherm
  html_ShowElement('AjaxLoading');
  // Laat de region zien, in dit geval 'apexir_LOADER' --> het icoontje bovenin
  //  $('#' + pRegionStaticId).show();
  // Open het modal scherm
  //  $('#' + pRegionStaticId).modal(pOptions);
}// goModal
* Sluiten van het modal scherm
modalClose=function(){
   // verberg het ajax laad scherm
   html_HideElement('AjaxLoading');
   $.modal.close();
}// modalClose
// OnLoad tasks
$(document).ready(function(){
  // Voor alleen uit wanneer er een IR is op de pagina
  if ($('.apexir_WORKSHEET_DATA').length > 0) {
    // See apex_ns_3_1.js for _BusyGraphic
    function dispIRBusyGraphics(pState){
    if(pState == 1){
        // Here apexir_LOADER is the object ID.
        // You can use your own region if you wanted to etc...
     goModal('apexir_LOADER', {position:['30%',]});
    else{
       modalClose();
    return;
    }// dispIRBusyGraphics
    function updateIRJS(){
     // This time out is required since after the report is refreshed
     // via AJAX, need to reattach the l_LastFunction command
     setTimeout(
       function(){
        gReport._BusyGraphic = function(pState){dispIRBusyGraphics(pState);};
       1000
    gReport = new apex.worksheet.ws('');
    gReport.l_LastFunction = function(){dispIRColGroups();}
    // Need to put timeout since not registering on initialization
    setTimeout(function(){gReport._BusyGraphic = function(pState){dispIRBusyGraphics(pState);};},500);
    updateIRJS();
  } //If IR exist
</script>and when i disabled this on page 0 the functionality was working correctly.
Thanks for demoing this in the application.
Marco