APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

PROGRESS BAR WHILE LOADING A PAGE

Gor_MahiaJul 11 2012 — edited Jul 22 2012

All,
iam using below code and its working good with page submit button but i need it for a page load i.e when a page loads show the progress bar(page which take a while to load) so i can call it like onload. Anybody who has done this pls i appreciate if you could help...

function html_Submit_Progress(pThis){
$x_Show('AjaxLoading');
window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 900);
doSubmit('APPLY_CHANGES');
}

function submit_HideAll(pThis){
$x_Hide('wwvFlowForm');
doSubmit('APPLY_CHANGES');
}

function submit_ButtonRegion(pThis){
$x_Hide('button_region');
doSubmit('APPLY_CHANGES');
}

using apex 4.1 and my page here i need it is a popup.
thanks

Roel Hartman

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>

Gor_Mahia

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

Gor_Mahia

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.

Gor_Mahia

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!!!

Gor_Mahia

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.

Gor_Mahia

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.

Gor_Mahia

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

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

Gor_Mahia

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

zooid

Hi jieri,

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

Regards

Gor_Mahia

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

zooid

Hi jieri,

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

Thank you

Gor_Mahia

wkspace=proj2010,
userid/pswd=demo/demo123

zooid

Thank you.

Gor_Mahia

did it work for you?

Gor_Mahia

did you get your issue solved?

Gor_Mahia

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>

Gor_Mahia

1 - 22

Locked Post

New comments cannot be posted to this locked post.

Locked on Aug 19 2012

Added on Jul 11 2012

#apex-discussions

22 comments

8,495 views

APEX

PROGRESS BAR WHILE LOADING A PAGE

Comments

Post Details