AJAX get Page Report w/ loading animation

When using AJAX to request new page content, loading animations are useful because the users won't see their browser's status bar loading animation.

You can try a working example of my AJAX get Page Report w/ loading animation demo.

1.
Add on your page a "Report Region" using an SQL Query for the data source.
Identification > Static ID: p27_report_drop
Source > Region Source: select null from dual where 1 = 2
Header and Footer > Region Header: <img src="http://www.blogger.com/i/processing3.gif" />

You should see an empty report with a loading animation.


2.
Add the jQuery code to request page 27 Report Region.

<script src="http://www.google.com/jsapi"></script>
<script>
    // Load jQuery
    google.load("jquery", "1.2.6");
</script>
<script>
    $(function() {    
        // send request
        $.post("wwv_flow.show", 
               {p_flow_id:$('#pFlowId').attr("value"), 
                p_flow_step_id:"27", 
                p_instance:$('#pInstance').attr("value"), 
                p_request:""},
               function(data){
                    var startTag = '<apex:ajax>';
                    var endTag = '</apex:ajax>';
                    var start = data.indexOf(startTag);
                    
                    if (start > 0) {
                        data = data.substring(start+startTag.length);
                        var end = data.indexOf(endTag);
                        data = data.substring(0,end);
                    }
                    
                    $("#p27_report_drop td.t4RegionBody").html(data);
                    
                    //Workaround to make the report "pagination" and "order by" work
                    $('#pFlowStepId').attr("value","27");
               }
        );
    });
</script>

The new content will overwrite the loading animation.


The feedback offered to the users can make the difference between two similar applications. Make sure you give enough feedback but don't exaggerate. You don't want to quickly display loading animations and then overwrite them in a fraction of time. The users will see flickers and they might get confuse about what's going on. ;)