Trapping the end of a document load [Archive]

View Full Version : Trapping the end of a document load

ScottInTexas

02-10-2003, 04:26 PM

In order to allow the user to print the data I am displaying in a scrolling Iframe, I have had to write another ASP attached to the "Print" button so that the Iframe can be filled with the data including the headers. Otherwise I have the headers displayed above the scrolling frame.

When the user clicks on print I have had to put a timer in for a couple of seconds to allow the data time to accumulate and invoke the print. This seems real sloppy to me. I think I should be able to recognize when the data is complete, then invoke the print.

Any ideas?

Danne

02-10-2003, 04:34 PM

Do you mean
<body onLoad="self.print();">
?

ScottInTexas

02-10-2003, 07:47 PM

Thanks Daniel, but no. When the page is originally displayed the user is looking a a lot of data drawn from a database on the server. The column headings are fixed above the scrolling window. If the user wants to print the contents of the data window (not the entire web page) he clicks on the print button.

In order to print the scrolling window so it includes ALL of the data and not just the visible data, and to avoid printing the entire webpage, and to include column headers in the print out, then I have to call an ASP to download the data differently than when he is just viewing the data.

When the data is reloaded in the scrolling window, along with the column headings, the actual print is fired.

In order to make sure the newly loaded data is printed I have had to add a delay. The problem is that this may be longer from Spain than it is from Texas. If I dont print the "newly loaded" data then I get a snapshop of the webpage.

function doPrint(){
dataWindow.location='';
dataWindow.focus();
dataWindow.location="http://.../gapanalysis/PrintIt.asp?plant="+ strPlant + "&Region=" + strRegion + "&ReportType=" + strRptType;
var iTimerID = window.setTimeout("window.print()", 3000 , "javascript");
}

I am wanting to know when dataWindow.location is finished.

Thanks a lot,

Roy Sinclair

02-10-2003, 09:28 PM

This sounds like a wrong approach. If your users aren't stuck with old browsers (v4 of IE or Netscape) then you should be able to use media specific style sheets to not print the parts of the page that aren't wanted. It should be possible to skip the reload process entirely.

Danne

02-11-2003, 10:43 AM

OK, but if you put the event onLoad in the dataWindow, you would be sure that it's loaded.

In the main window:

function doPrint(){
dataWindow.location='';
dataWindow.focus();
dataWindow.location="http://.../gapanalysis/PrintIt.asp?plant="+ strPlant
+ "&Region=" + strRegion
+ "&ReportType=" + strRptType;

}

And in the dataWindow (PrintIt.asp)

<script>

function printData()
{
window.print();
}

</script>
<body onload="printData();">

Hope I understood you correct ..:)

ScottInTexas

02-11-2003, 01:21 PM

Thanks Danne,

What was the Duh factor on that? It worked just fine. However (and there always seems to be one), I am getting strange results between two workstations. Keep in mind that both are identical in hardware and software as this is a global standard for the company. When I view this page and click on the print button (with the change you suggested), it works perfectly. The printit asp runs and as soon as the page is loaded the print dialog box appears and I press OK and, voila, the perfect printout. I removed the delay so the data appears as before. On my station this happens almost instantly. Down the hall on another work station the printit asp runs and the window that prints is the main webpage without the data window. Every single time, every single set of data. The selections in the print dialog box are the same, the data is the same. The window.onafterprint does not fire either so the downloaded data stays on the screen rather than being replaced as it should.

Something is stopping his WS from completing the task. As if the window.print in the ASP is refering to the main window rather than itself, but then I would think the onafterprint would be fired if that is the case (it is in the main widow with the DoPrint function). Maybe I should try this.print or me.print.

Any ideas are not only welcome but begged of you.

Thanks to Roy also. I don't know what media specific style sheets are so I'll have to dig it up and do some quick reading. In my case I don't want to except data in the print, I want to add data to the printing area (the headings).

ScottInTexas

02-11-2003, 02:43 PM

I just said everyone uses the same hardware and software. WRONG!. It seems that everyone is using IE5 and I am on IE6.

Now what? I have to fix this to work on IE5. What really hacks me is that until last week it worked as it was. :mad: Now it doesn't. I have no idea what changed or who could have changed it, which means nothing.

Now I'm pissed. Mostly because no one will download the newest version of any software, and this is FREE!

Here's what I've got.

In the Printit.asp

<link rel="stylesheet" href="http://.../newstyle.css"
type="text/css">
<title></title>
<script language="javascript">
function printData()
{
window.print();
}

</script>

</head>

<body onload="printData();">
<%

In the Webpage

function doPrint(){
dataWindow.location='';
dataWindow.focus();
dataWindow.location="http://.../PrintIt.asp?plant="+ strPlant + "&Region=" + strRegion + "&ReportType=" + strRptType;

//var iTimerID = window.setTimeout("window.print()", 3000 , "javascript");
}

function window.onafterprint(){
dataWindow.location='about:blank';
dataWindow.location="http://.../DataXfer.asp?plant="+ strPlant + "&Region=" + strRegion + "&ReportType=" + strRptType + "&PrintMe=False";
//alert("window.onafterprint has been called");
}

I don't know what I am using that is incompatible with IE5.

Any help is greatly appreciated.

Danne

02-11-2003, 03:29 PM

The onafterprint function should probably be located in the printIt.asp, since that is the window (=frame) you are printing.

So it seems a little strange if you got it to work on IE6...

According to Microsofts dHTML reference (http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp?frame=true), that event is supported by IE5.

Roy Sinclair

02-11-2003, 03:45 PM

Thanks to Roy also. I don't know what media specific style sheets are so I'll have to dig it up and do some quick reading. In my case I don't want to except data in the print, I want to add data to the printing area (the headings).

Media types are a great way of being able to send everything you need while controlling the display based on the output media (screen or print). See http://www.w3.org/TR/CSS2/media.html for more details.

<style type="text/css">
@media screen
{
.printHeading
{
display: none;
}
}
@media print
{
.printHeading
{
color: black; // No need to set the display value here
}
}
</style>

....

<table>
<tr class="printHeading">
...
</tr>
...
</table>

You should be able to transfer the above code into your application and test it. It would certainly simplify what you're trying to accomplish.

ScottInTexas

02-11-2003, 07:22 PM

Hey Roy,

You should be able to transfer the above code into your application and test it. It would certainly simplify what you're trying to accomplish.

This looks promising. If I can get this to work then I only need one ASP. I have tried to paste this into the ASP and I included the row for the headings in the table with the class set to printHeading class and I included another class showHeading for a table that I want to show ONLY when on screen. Both these tables appear in the single Iframe. So in my asp after all the vbscript and the closing '%>' I have;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>GetXL.ASP</title>

<style type="text/css">
@media screen{
.printHeading{
display: none;}
.showHeader{
color: #fa009d;}
}

@media print{
.printHeading{
color: black;}
.showHeader{
display: none;}
}

</style>
</head>
<body>
<IFRAME id='hdrFrame' marginwidth='0' scrolling='no' width='100%' height='45' frameborder='0' class='showHeader'></IFRAME><BR>
<IFRAME id='tblFrame' marginwidth='0' scrolling='auto' width='100%' height='225' frameborder='0'></IFRAME><BR>

<Script language="javascript">
document.frames("hdrFrame").document.write("<% =hdrDiv %>");
document.frames("tblFrame").document.write("<% =dataTable %>");
</script>

</body>
</html>

This is the part of the ASP where I am creating a table.

dataTable= "<TABLE id='tableContent' width='100%' border='1'><TR class='printHeading'>"

select case strReport
case "nonCompliant"
'response.write " nonCompliant<BR>"
dataTable=dataTable & "<TD style='font-size:9pt;font-weight:600;text-align=center;' width='15%' >LPP#</td>"
dataTable=dataTable & "<TD style='font-size:

I am not getting the desired results. The header row is showing up on the screen (forget that the color isn't right). I use color changes to see if the style is being seen. Obvioulsy not in this case. Is there a glaring error in this?

Roy Sinclair

02-11-2003, 10:26 PM

I tested this simple page in IE 6 (this stuff should work in IE 5 as well) and Moz 1.2 and it works in both. You should look at the html sent to the browser to verify that the styles, alternative headings and such are all getting to the browser. Your code fragments above only show the print heading but not the display heading. Of course if it's whole tables you need to swap then move the class to the <table> tags instead of the <tr> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testing</title>
<style type="text/css">
@media screen
{
.printHeading
{
display: none;
}
.screenHeading
{
color: green;
}
}
@media print
{
.printHeading
{
color: red;
}
.screenHeading
{
display: none;
}
}
</style>
</head>
<body>
<table summary="">
<tr class="printHeading">
<th>
Printer Heading
</th>
</tr>
<tr class="screenHeading">
<th>
Display Heading
</th>
</tr>
<tr>
<td>
Table contents
</td>
</tr>
</table>
</body>
</html>

ScottInTexas

02-12-2003, 12:52 PM

Thanks Roy,

Still no joy on my side. I wonder if it is the way my ASP is laid out? It is set up like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testing</title>
<style type="text/css">
.headerItem{
font-size:9pt;
font-weight:600;
text-align=center;
}

.dataItem{
font-size:9pt;
font-weight:600;
text-align=center;
}

@media screen {
.printHeading {
display: none;
}
.screenHeading{
color: green;
}
}
@media print{
.printHeading{
color: red;
}
.screenHeading{
display: none;
}
}
</style>
</head>

<body>
<%@ Language=VBScript %>
<%
Dim MyRegion
Dim MyPlant
.
. Code to create the variable for the header frame
.
hdrDiv=hdrDiv & "<TABLE border='0' width='100%' marginwidth='1' cellpadding='0' cellspacing='0'>"
hdrDiv=hdrDiv & "<CAPTION>" & rptTitle & "</CAPTION><TR >"
select case strReport
case "nonCompliant"
hdrDiv=hdrDiv & "<TD class='screenHeaderItem' width='15%' >LPP#</td>"
. etc, etc, etc.
.
. A bunch of code to collect the data from a DB and create a single big string with the table def.
.
.
dataTable= "<TABLE id='tableContent' width='100%' border='1'>"
dataTable=dataTable & "<TR class='printHeading' >"

'Which heading is required. Comes from the query string
select case strReport
case "nonCompliant"
.
.
end Select
dataTable=dataTable & "</tr>"
.
. More stuff
.
dataTable=dataTable & "</TABLE>"

%> //end of vbscript

<IFRAME id='hdrFrame' marginwidth='0' scrolling='no' width='100%' height='45' frameborder='0' class='screenHeading' ></IFRAME><BR>
<IFRAME id='tblFrame' marginwidth='0' scrolling='auto' width='100%' height='225' frameborder='0'></IFRAME><BR>

<Script language="javascript">
document.frames("hdrFrame").document.write("<% =hdrDiv %>");
document.frames("tblFrame").document.write("<% =dataTable %>");
</script>

</body>
</html>

All of this is stuffed into an IFrame on the calling webpage. The calling web page also has the Print button on it. Is the style not seen because of the multiple IFrames?

I really appreciate your help.
Maybe everything should be gernerated in the vbscript?

Roy Sinclair

02-12-2003, 04:39 PM

Aha! It just hit me what the problem here is, fortunately the solution is still easy. The style for the print isn't being seen because it isn't in the document being sent to the IFRAME. What's displayed in the IFRAME is not part of the outer document and inherits nothing (including styles) from the outer document. What you put into an IFRAME is another web page that's just embedded inside space on a different web page. That embedded web page should have it's own <html><head></head><body></body></html> structure though the browsers are extremely forgiving and will still render code where that's left off.

With that background the problem here is that the style needs to be written to the page inside the IFRAME because it's the IFRAME contents which are being printed. Since you aren't printing anything from the outer document (or the second IFRAME) the styles for the printing aren't needed in those documents.

ScottInTexas

02-12-2003, 06:36 PM

YES! I finally feel like I'm moving forward, thanks to your help. Still not getting the first row in my table to accept the .printHeading but got results in other places so I'll keep this up. I should be able to completely scrap one ASP meaning one download and in our plants in Spain they can sometimes take quite a while.

I came back to add this

dataTable= "<HTML><HEAD><STYLE type='text/css'>"
datTable=dataTable & "@media screen{.printHeading{display: none;}"
datTable=dataTable & ".dataItem{font-size:9pt;font-weight:400;text-align:left;color:black;}}"
datTable=dataTable & "@media print{.printHeading{font-size:10pt;font-weight:600;text-align:center;color: black;}}"
datTable=dataTable & "</STYLE></HEAD>"
dataTable=dataTable & "<BODY>"
dataTable=dataTable & "<TABLE id='tableContent' width='100%' border='1'>"
dataTable=dataTable & "<TR CLASS='printHeading'>"

All the closing tags are below. The TR class='printHeading' is still showing up on the screen.

Roy Sinclair

02-12-2003, 08:51 PM

Do a View-Source on the IFRAME and check the generated html to make sure it's all ok.

ScottInTexas

02-13-2003, 02:16 PM

It looks like I got it together Roy. Thanks for all your help. I did exactly that, View Source. Then I found out where my parameters were wrong, corrected them and carefully pasted the changes into my code with the proper quotes on the end of the strings.

Looks good.