Oracle Database Discussions

Hi Graham

Have a look at Carl's example: http://htmldb.oracle.com/pls/otn/f?p=11933:69

Andy

Hi Andy,
Ideal - looks perfect for what I need.
Thanks for the quick reply.

Graham.

Hi Guys,
I'm not sure what I am doing wrong, but I can't get this to work.
I have a button called P1_DOWNLOAD_FILE_DATA.
On the "Optional URL Redirect" property, I have set URL target as ...javascript:html_Submit_Progress(this);

Then I have set the following in the Header Region ...

<script type="text/javascript">
<!--

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

//-->
</script>

Then I have set the following in the Footer Region ...

<style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:50%;position:absolute;border:2px solid #666;background-color:#FFF;}
</style>


<div id="AjaxLoading" style="display:none;">..Loading..
<img src="/processing3.gif" id="wait" /></div>

I then downloaded the processing3.gif from the web and uploaded it into my application, but whenever the user presses the button he gets 'Error on Page' message, but doesn't give any more specific information.

Does the button that the user is pressing have to be in a different region than the code that has the header and footer above ?


Thanks
Graham.

Sorry the code I have entered in the footer is


<style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:50%;position:absolute;border:2px solid #666;background-color:#FFF;}
</style>
<div id="AjaxLoading" style="display:none;">..Loading..
<img src="/processing3.gif" id="wait" /></div>

Edited by: user651341 on Nov 3, 2008 10:29 PM

Hi Graham,

I've just set up a small example: http://htmldb.oracle.com/pls/otn/f?p=45958:32

This is pretty much just a straight copy/paste job from Carl's example. But this is what I've done:

1 - Copied the processing3.gif and uploaded this as a workspace image (ie, not attached it to any app) through Shared Components, Images

2 - Created a page with an HTML region

3 - In the page's HTML header, I have entered:

<style type="text/css">
#AjaxLoading {padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:50%;position:absolute;border:2px solid #666;background-color:#FFF;}   
</style>
<script type="text/javascript">   
<!--   
function html_Submit_Progress(pThis){
$x_Show('AjaxLoading');
window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 100);
doSubmit('P32_BUTTON');
}
 
function submit_HideAll(pThis){
$x_Hide('wwvFlowForm');
doSubmit('P32_BUTTON);
}
 
function submit_ButtonRegion(pThis){
$x_Hide('button_region');
doSubmit('P32_BUTTON');
}
//-->
</script>

4 - In the region's Region Footer, I have entered:

<div id="AjaxLoading" style="display:none;">..Loading..<br /><img src="/i/processing3.gif" /></div>

5 - Created button called P32_BUTTON, with a target of URL and a URL Target setting of:

javascript:html_Submit_Progress(this);

And, that's it.

This seems to work ok

Andy

Hi Andy,
Many thanks for the reply.
I'll check this this evening and report back.

What I definately did differently was uploaded the processing3 image direct to my app as opposed to all apps.

Everything else seems pretty much the same, but I'll copy and paste exactly what you've done and see how I go.

Thanks again in the meantime.

Graham.

Hi Graham,

If you have uploaded the file differently, you can use one of the following:

<img src="#WORKSPACE_IMAGES#processing3.gif"/>
<img src="#APP_IMAGES#processing3.gif"/>
<img src="#IMAGE_PREFIX#processing3.gif"/>

Andy

Andy,
Can you share your example application? I can not make it work and I would like to download your example to take a look. thanks.

Hi,

Everything I've done for that page has been detailed in my previous post - there's nothing else involved. Have you double-checked where each bit goes?

Andy

Hi Andy,
Really appreciate all your work here.
Unfortunately I still can't get it to work and think I'll need to forget it.

However this is exactly all the steps I have taken.

1 - Created a brand new page in my application

2 - Created a new HTML region called p32_region

3 - Created a new button called p32_button (which resides within region p32_region).

4 - The target on the button is URL and the URL Target is ... javascript:html_Submit_Progress(this);

5 - The page header (not the region header) is ...

<style type="text/css">
#AjaxLoading {padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:50%;position:absolute;border:2px solid #666;background-color:#FFF;}
</style>
<script type="text/javascript">
<!--
function html_Submit_Progress(pThis){
$x_Show('AjaxLoading');
window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 100);
doSubmit('P32_BUTTON');
}

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

function submit_ButtonRegion(pThis){
$x_Hide('button_region');
doSubmit('P32_BUTTON');
}
//-->
</script>

6 - The region footer is ...
<div id="AjaxLoading" style="display:none;">..Loading..
<img src="/i/processing3.gif" /></div>

I am using XE as opposed to APEX, but should that matter ?

I ended up having to import processing3.gif directly into my application as well.

Anyway thanks for your help - your example looked great and I'm dissapointed I can't get it to work, but whenever the user presses the button they get an silly 'Error on page' message but it points to nothing obvious.

All the best
Graham.

Hi,

I don't think that using XE would make a difference. However, it is possible that some of the Apex javascript functions do not exist on your machine?

As a simple test, create an text page item called P32_TEXT in your region and put as its source some text value - anything will do.

Now, in your script in the page HTML header, create a new function:

function showmessage()
{
 alert($v('P32_TEXT'));
}

and change the button's url target to:

{ocde}
javascript:showmessage();

When you click the button, the contents of P32_TEXT should be displayed.  If it isn't and you get an error, that indicates that you do not have the Apex javascript package available to use.  Not a problem as we can create our own version for use or simply use the standard javascript stuff to achieve the same results.

Andy                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

Hi Andy,
Sorry for the delay in replying.
But I did the fiollowing ....

1 - Created new text item called P32_TEXT and in the 'Source value or expression' set it to ABCDE
2 - Altered the header text on the page to say ...
function showmessage()
{
alert($v('P32_TEXT'));
}
3 - Altered the button property to have 'Target is a URL' and the URL target is javascript:showmessage();

When I run and press the button I get the 'Error on Page' button, so I think you're right - maybe it's some Ajax stuff that's missing.

Thanks in advance.

Graham.

Hi Graham,

Is your script within SCRIPT tags? It should be:

<script type="text/javascript">
function showmessage()
{
 alert($v('P32_TEXT'));
}
</script>

But, before we look at any Ajax issue - just change the message to: alert('Hello');


Andy                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

Hi Graham

If you go back to http://htmldb.oracle.com/pls/otn/f?p=45958:32 you will see that I have uploaded screenshots of everything that I have done to get this functionality to work on that page.

You could try creating a new page with just this on it to ensure that this works for you?

Andy

Hello,

>> I am using XE as opposed to APEX, but should that matter ?

First, XE is not opposed to APEX. APEX, or at the time HTMLDB, was embedded into the XE database.

Second, as Andy mentioned, using XE shouldn’t matter, but the version of APEX on the XE matters a lot. Are you using the original version, which came with XE, or did you upgrade to a newer version? For example, $x() was not available in the original HTMLDB installed on XE. $v() was only introduced in version 3.1 .

>> I ended up having to import processing3.gif directly into my application as well.

That can be an indication that either you are using an old version that don’t support the JavaScript methods you are trying to use, or, if you upgraded the original HTMLDB into a version of APEX, you didn’t copy the ‘images’ directory properly.

Regards,
Arie.

Hi (again) Andy,

Still no joy I am afraid.

Do you have an e-mail address or somewhere that I could send an attachment to show all I have done and the error message that appears.

Thanks for your help and patience.

Graham.

Hi,

Yep - send it to ............

Andy

Hi Andy,

I am trying to get the progress bar on my screen, when the user tries to upload the file.

Now when i use the code provided by u,as soon as i click on the button i get an error(javascript error) object expected line 1 char 1.
but then i cud see the still progress bar and the processing is done.
whats the cause of the error.
i see th error when i click on the small yellow triangle that appears on the status bar.


Thanks
Ash

Hi,

It is possible that you're using an older version of Apex? This may not have the latest javascript files that are needed to use Carl's example.

If so, try using the following javascript on your page's HTML Header:

<style type="text/css">
#AjaxLoading {padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:50%;position:absolute;border:2px solid #666;background-color:#FFF;}   
</style>
<script type="text/javascript">   
<!--   
 
function showtext()
{
 alert(document.getElementById("AjaxLoading").innerHTML);
}

function html_Submit_Progress(pThis){   
document.getElementById('AjaxLoading').style.display = 'block';
window.setTimeout('document.getElementById("AjaxLoading").innerHTML = document.getElementById("AjaxLoading").innerHTML', 100);
doSubmit('P32_BUTTON');
}

function submit_HideAll(pThis){   
document.getElementById('wwvFlowForm').style.display = 'none';
doSubmit('P32_BUTTON');   
}
  
function submit_ButtonRegion(pThis){   
document.getElementById('button_region').style.display = 'none';
doSubmit('P32_BUTTON');   
}   
  
  
//-->
</script>

This just uses standard javascript functionality, so should work for all Apex versions

Andy

Hey Andy,

Thanks a lot, yeah now it does not give me an error,
but i had a few questions

wat does the following functions do, and when r they called.

function submit_HideAll(pThis){
document.getElementById('wwvFlowForm').style.display = 'none';
doSubmit('P32_BUTTON');
}

function submit_ButtonRegion(pThis){
document.getElementById('button_region').style.display = 'none';
doSubmit('P32_BUTTON');
}


Thanks
Ashri

Hi,

That part of the javascript is not used during the display message process. The entire code was copied from Carl's example page (link is near the top of the thread).

submit_HideAll should hide the entire form and submit_ButtonRegion should hide the buttons in the region positions on the form. You don't need either of these to display the "Loading" graphic, so you can ignore them.

Andy

Thanks a lot Andy for your time and answers.

I really appreaciate the contribution u guys are doing thru this forum.


Thanks
Ashri

You're welcome, Ashri

Andy

Andy,

I just wanted to make sure that this code wud avoid the display of server time out message on the screen
when a process is executing in background.

rite?

thanks
Ashri

Hi Ashri,

I haven't yet tested this on a process that would take that long! The setTimeout line should keep the page open - however, I would have written the code in a slightly different way to be more certain of this. If, after using this, the page does timeout, let us know.

Andy

Hey Andy,

could you please post the other code.
My main purpose is to avoid the timeout situation and i thot this was the solution to it.

And it wud be great if u cud provide me a link where i cud learn javascript and ajax

Thanks
Ashri.

Hi,

I would do something like:

function html_Submit_Progress(pThis){
document.getElementById('AjaxLoading').style.display = 'block';
updateimage();
doSubmit('P32_BUTTON');
}

function updateimage(){
document.getElementById("AjaxLoading").innerHTML = document.getElementById("AjaxLoading").innerHTML;
window.setTimeout('updateimage()', 100);
}

That way, the updateimage would call itself every 100 milliseconds until the page was unloaded.

As for javascript/ajax references - I tend to use ones that are available through my office. You could start by looking at http://www.w3schools.com/js/default.asp (this also has sections for css, html, dhtml etc) and is a useful reference guide. For Ajax, the best source I've found for anything I'd need to do in Apex, is actually this forum. But the w3schools link also has a section on this as well: http://www.w3schools.com/Ajax/ajax_intro.asp

Andy

Edited by: ATD on Nov 11, 2008 5:27 PM

Thank you Andy

Regards
Ashri

np, Ashri