Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 15th, 2007, 02:31 AM
Friend of Wrox
Points: 686, Level: 9
Points: 686, Level: 9 Points: 686, Level: 9 Points: 686, Level: 9
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2005
Location: Kolkata, West Bengal, India.
Posts: 128
Thanks: 0
Thanked 0 Times in 0 Posts
Default Show/ Hide image while saving file.

Hi All,

I have an asp report page which has options to save the report as html & print the page. Both these are done by javascript by clicking the 2 images for save & print. In the case of Saving the file I have tried using "style = display:none;" with the Save img with javascript ExecCommand('SaveAs'). But this does not help. I can see the outline of the 2 images in the .htm file that I have saved. I have to save the file without the images. How can I achieve this. The following is the code that i have used:

-----------------------------------------------------------------
function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    SaveReport();
}
function SaveReport()
{
    document.execCommand('SaveAs',1,'PASSReportMain');
    document.getElementById("SaveImg").style.display = 'block';
    document.getElementById("PrintImg").style.display = 'block';
}
-------------------------------------------------------------

The function openSaveReportDialogue() is called from the Onclick of the save image.


Pls help!!!!
Reply With Quote
  #2 (permalink)  
Old June 17th, 2007, 04:44 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

When you try to save a document, browser will send a new request to server and retrieves a new copy of your page (and also all of it's resources) and let user choose an appropriate location to save newly downloaded document. As your 'Save' and 'Print' buttons are visible in newly downloaded page, they will be visible in saved one too.

I think you can place a hidden IFRAME (like <IFRAME id="saveFrame" style="display:none"></IFRAME>) in your page and replace your 'openSaveReportDialogue()' method with something like this :

function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    document.getElementById("saveFrame").document.writ e(document.body.innerHTML);
    SaveReport();
}

Using this approach, you will fill 'saveFrame' with your current document's content (not the original one) and as you are hiding buttons just before doing this, they will not appear in frames content.

Also notice that you should change your 'SaveReport' implementation as below :

function SaveReport()
{
    document.getElementById("saveFrame").document.exec Command('SaveAs',1,'PASSReportMain');
    document.getElementById("SaveImg").style.display = 'block';
    document.getElementById("PrintImg").style.display = 'block';
}

In this implementation, you will save contents of 'saveFrame' instead of main document
Reply With Quote
  #3 (permalink)  
Old June 19th, 2007, 09:28 AM
Friend of Wrox
Points: 686, Level: 9
Points: 686, Level: 9 Points: 686, Level: 9 Points: 686, Level: 9
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2005
Location: Kolkata, West Bengal, India.
Posts: 128
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for your suggestion !!!

But where do I place the IFRAME block???? and What will it contain???? Will it contain HTML block having the 2 images that I have presently in a <Div> ..????
Your help needed???
Reply With Quote
  #4 (permalink)  
Old June 20th, 2007, 12:32 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Dear arnabghosh

Position of IFRAME element is not important, it's display style is none, so your browser will not render it on screen.

As I said, an IFRAME element has no content at start
(<IFRAME id="saveFrame" style="display:none"></IFRAME>).

It's contents are provided in your 'openSaveReportDialogue' method as
document.getElementById("saveFrame").document.writ e(document.body.innerHTML
);

You should place your buttons in their original place as before (Don't place them in IFRAME element).

Just do this, as i said in previous post, and it works (I tried it).

Ehsan Zaery Moghaddam
Reply With Quote
  #5 (permalink)  
Old June 22nd, 2007, 02:48 AM
Friend of Wrox
Points: 686, Level: 9
Points: 686, Level: 9 Points: 686, Level: 9 Points: 686, Level: 9
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2005
Location: Kolkata, West Bengal, India.
Posts: 128
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the solution. It works. Only problem is the display gets distorted and does not inherit any of the styles that were used for the page.

How can I deal with that????
any help??
Reply With Quote
  #6 (permalink)  
Old June 23rd, 2007, 01:11 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi arnabghosh

Your stylesheets are defined in HEAD element of document and when you copy inner html of document to hidden frame, copy operation will be done just for body contents (not header of document).

I think you can create your frame stylesheets dynamically using 'createStyleSheet' method of 'document' object. You should do this after setting content of frame and just before saving it, and repeat it for every style link element in page header. So again, your 'openSaveReportDialogue' method will be changed to :

function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    document.getElementById("saveFrame").document.writ e(document.body.innerHTML);
    for(var i=0; i<document.styleSheets.length; i++)
    {
        document.getElementById("saveFrame").document.crea teStyleSheet(document.styleSheets[i].href);
    }
    SaveReport();
}

Have a nice save!




Ehsan Zaery Moghaddam
Reply With Quote
  #7 (permalink)  
Old June 25th, 2007, 08:49 AM
Friend of Wrox
Points: 686, Level: 9
Points: 686, Level: 9 Points: 686, Level: 9 Points: 686, Level: 9
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2005
Location: Kolkata, West Bengal, India.
Posts: 128
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks Ehsan Zaery Moghaddam !!!

I tried the above code for style sheets but did not work.

I used
alert(document.styleSheets.length);

to check if the style sheet could be copied but the result was that the alert gave a '0' value in return for the length, which means it could not get the style sheets.

my style sheets are as follows:
<STYLE TYPE="TEXT/CSS">
  .TextOnHeader
   {
   FONT-SIZE:10 pt;
   FONT-FACE:Arial;
   FONT-WEIGHT:BOLD;
   }
  .TextOnData
   {
   FONT-SIZE:8 pt;
   FONT-FACE:Arial;
   }
   TD
   {
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
   }
   INPUT
   {
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
   }
   SELECT
   {
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
   }
  </STYLE>

This is in the head section.
I have used yur javascript code as:
for(var i=0; i<document.styleSheets.length; i++)
    {
        document.getElementById("saveFrame").document.crea teStyleSheet(document.styleSheets[i].TextOnHeader);
    }

may be I have missed something.

Anyway thanks A lot for letting me know a few new things.
Reply With Quote
  #8 (permalink)  
Old June 26th, 2007, 12:49 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi arnabghosh

You should use this technique only when you have defined your stylesheets in an external CSS file and link it to your document as below in head section of document :

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

'styleSheets' collection of 'document' object contains an array of 'styleSheet' objects that have been defined in this manner.

Good luck





Ehsan Zaery Moghaddam
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
HIDE/SHOW pallone Javascript How-To 11 April 16th, 2007 11:24 AM
how to show/hide forms ? ashrafzia C# 3 November 3rd, 2006 11:07 AM
show/hide row(s) eugz Beginning PHP 0 March 19th, 2006 10:10 PM
Saving/Retrieving Image file to Database davekrunal46 VB How-To 6 January 11th, 2006 04:41 AM



All times are GMT -4. The time now is 04:26 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.