Oracle Forms

You can fix that in your page template by putting something like this just before the BODY tag in the Header region:

<div id="loading" 
  style="display: block;
         position: fixed;
         top: 0px;
         left: 0; 
         z-index: 1999; 
         width: 100%; 
         height: 100%; 
         background-color: #fff;
         text-align: center;">
<div style="position: relative;
            top: 130px;">
Wait..loading..
</div>
<img src="#IMAGE_PREFIX#themes/theme_200/images/loading.gif" height="32" width="32" 
   style="position: relative;
          top: 150px;"/>
</div>

and putting something like this just after the closing BODY tag in the Footer region:

<script>
$(document).ready(function(){
  $('#loading').hide();
 });
</script>

Roel,
this shows the scrollbar which doesnt stop(running forever) but again only when the page is directly launched. I intended to apply this to a popup page called when a button is clicked and also the scrollbar should disappear after rendering the data....thank you.

I guess you will be using a different page template for popup pages from the normal pages.

So edit the page template that is used by your popup page and amend it as per Roel's suggestion

http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/ui_templt.htm#HTMDB25673

VC,
This Report region i created based on dynamic content with htp.p() but i created another region for search parameters however after insert the codes before page header and after footer in the region it works like scrolling but now it blocks even the data load, it will forever be scrolling no data displayed....anything iam missing now? thank you.

All,
I am in dare need of this issue can somebody help please...thanks in advance.

The easiest way is ...just recreate your issue on http://apex.oracle.com that's it!!!

VC,
Thank in advance.
I created a sample form calling a popup report though this report doesnt contain much data it loads so fast but is clearly like what i am doing: Please follow the below sequence to see
In Employee Application, run Page13 then click Details button to launch popup Report page11. While popup page loads i want to display the progress bar.

http://apex.oracle.com/pls/apex/
workspace=proj2010
user/pwd=demo/demo123

....regards

Hi,

I have created a new page template called One Level Tabs - Right Sidebar (optional / table-based) - Progress Bar and used for your page 11.

And this page template has a loading div before body tag and the same is hidden after the body close tag(in the ame template)

Therefore any page that uses this template will show the processing/loading icon while the page loads.

If you want to show the same loading/processing icon for regions once the page is loaded you can simply create a dynamic action and the show the loading div using beforerefresh and afterrefresh events

I have added those dynamic actions to your interactive report on page 11, when you refresh your IR report you will see the loading div.

You can amend the loading div and incorporate your custom loading icon if you want.

VC,
Excellent job but i ve a question here,
In the real scenario i am using theme20 and tried to follow your steps by steps to apply the same concept i seem to be missing something. The sample i gave was due to the fact Employees Application was already there but it seems this is Theme specific,
Please i will really be grateful if you could guide me thru the actual sample app i just created its like my real theme&pages ===> developer07152012. Ive page1 calling page3 which is like the actual report taking long to load in my case.....appreciated in advance & enjoy your weekend.

(http://apex.oracle.com/i/index.html ; wksp=proj2010 username/pwd=demo/demo123)

It it not theme specific...you have to copy your page template and create a new page template > and add the loading div toit.

I have copied One Level Tabs to One Level Tabs Popup - Progress bar and used it for page 3.

Go to Shared components > Templates > Type: Page > look into One Level Tabs Popup - Progress bar for loading div in the header section and jquery code to hide it in the footer secton

You can view the page 3 definition to see the usage of above page template.

VC,
Thank you so much you deserve 5 STARS...best regards.

How about marking the correct/helpful answers to help other users

That will be more appropriate, sir but i cant see it after i marked answered.

Hi jieri,

Any chance you can open the solution demo you have on the oracle apex for other to view ?

Regards

did you try the credentials i gave before, try again let me know.

Hi jieri,

Yes I did, but unfortunately I could not gain access with the credentials published on this thread.

Thank you

wkspace=proj2010,
userid/pswd=demo/demo123

Thank you.

did it work for you?

did you get your issue solved?

Roel ,
I resolved this issue with your help on Apex 4.1.1.x. also ive tried many other pages on the same version on IE&FF it works but iam having problem with Apex 4.1.0.x it doesnt work at all can you please help.

You can fix that in your page template by putting something like this just before the BODY tag in the Header region:

<div id="loading" style="display: block;
position: fixed;
top: 0px;
left: 0;
z-index: 1999;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;">
<div style="position: relative;
top: 130px;">
Wait..loading..
</div>
<img src="#IMAGE_PREFIX#themes/theme_200/images/loading.gif" height="32" width="32"
style="position: relative;
top: 150px;"/>
</div>


and putting something like this just after the closing BODY tag in the Footer region:

<script>
$(document).ready(function(){
$('#loading').hide();
});
</script>

Roel ,
I resolved this issue with your help on Apex 4.1.1.x. also ive tried many other pages on the same version on IE&FF it works but iam having problem with Apex 4.1.0.x it doesnt work at all can you please help.

You can fix that in your page template by putting something like this just before the BODY tag in the Header region:

<div id="loading" style="display: block;
position: fixed;
top: 0px;
left: 0;
z-index: 1999;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;">
<div style="position: relative;
top: 130px;">
Wait..loading..
</div>
<img src="#IMAGE_PREFIX#themes/theme_200/images/loading.gif" height="32" width="32"
style="position: relative;
top: 150px;"/>
</div>


and putting something like this just after the closing BODY tag in the Footer region:

<script>
$(document).ready(function(){
$('#loading').hide();
});
</script>