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

Comments

qenchi said…
Hi

Where shall i add the jquery code?

Thanks!

Popular posts from this blog

APEX 4.0 EA1 Plugins - jQuery UI Tabs

A New Dawn: From Oracle Apex to Generative AI