Solved

javascipt function document.getElementById() gives error.

Posted on 2004-08-11
19
1,819 Views
Last Modified: 2012-06-27
Hi,

here is a fucntion which I've written in javascript

function handlePrint()
{
document.write('<html><body>');
document.write('<table>');
var tableTemp=document.getElementById("table1");
alert(tableTemp.innerText);
//your selected table should have a id or name
document.write(tableTemp.innerHTML);
document.write('</table>');
document.write('</body></html>')
window.print();
}

in the above function, the line "var tableTemp=document.getElementById("table1"); " gives an error saying object required.

The table object with an id "table1" already exists.

Please help me out, Thanks in advance.

Vishrut
0
Comment
Question by:vishrutsumit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 5
19 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 350 total points
ID: 11776299
Hi

Most likely it's because the two previous document.write() statements erased your whole page if it's in the <head> section. Before you do document.write(), you should save var tableTemp. Try this:

var tableTemp=document.getElementById("table1");
document.write('<html><body>');
document.write('<table>');
alert(tableTemp.innerText);
//your selected table should have a id or name
document.write(tableTemp.innerHTML);
document.write('</table>');
document.write('</body></html>')
window.print();


Regards,
Zyloch
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11776355
you may need to go one step further Zylock

var tableTempText=document.getElementById("table1").innerText;
document.write('<html><body>');
document.write('<table>');
alert(tableTempText);
//your selected table should have a id or name
document.write(tableTempText);
document.write('</table>');
document.write('</body></html>')
window.print();
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776384
Ah, that's my bad, sorry *looks sheepish*
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:vishrutsumit
ID: 11776514
Hi Zyloch/Bustarooms,

Great !!This works,Thanks a lot.only thing remained is that now I want to print the newly displayed page, and its not working,can any of you please suggest something.

Thanks in advance
Vishrut
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776627
How come it's not working? Make sure your handlePrint function is in the <head> section.
0
 

Author Comment

by:vishrutsumit
ID: 11776732
Actually the handlePrint method is getting called,but it doesnot print..I doono why
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776777
Well, you never know until you try ;) Try this:

document.write('<html><body onload="self.print();">');
0
 

Author Comment

by:vishrutsumit
ID: 11776916
No It doesn't, this is my  code :

function handlePrint()
{
alert("Print Called");
var tableTemp=document.getElementById("table1").innerHTML;
document.write('<html><body onload="self.print();">');
document.write('<table>');
alert(tableTemp);
//your selected table should have a id or name
document.write(tableTemp);
document.write('</table>');
document.write('</body></html>');
window.print();
}

after my new window is displayed,and I go back by right clicking,then the print window appears,and it displays the old window.I want to display the new window which I just created.

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11776947
How odd. This was my test:

<html>
<head>
<script>
function oh() {
document.write('hi');
}
</script>
</head>
<body>
<p onclick="oh();">fjdsoifdsh</p>
</body>
</html>

Look at Print Preview after you click the fjdsoifdsh.
0
 

Author Comment

by:vishrutsumit
ID: 11777173
I did that.
Acually in my case it worked,but only after I refrseh the window.Because when I refresh the onLoad even will be called,and the print is fired automatically.
I want that without refresh it should work.

Vishrut
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777210
i guess your trying to make a printer friendly type of thing

if so there's a cleaner and nicer way using css and media types
0
 

Author Comment

by:vishrutsumit
ID: 11777275
yes I'm trying to do the same.Please suggest a solution if you have so.
in my printer friendly page, I want to remove some of the headings and just want to show tabular data.

Please suggest.I'm also increasing the point value now.
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777378
ok well this is ridiculously simplified, but it should give you the idea.



<html>
<head>
<style>
@media print {
    .banners, .footer{display:none;}
}
</style>
</head>
<body>
<div class="banners">THIS IS A BANNER.  WE DON'T WANT TO PRINT THIS</div>
<table id="table1">
 <tr><td>Here's what I do want to print</td></tr>
</table>
<div class="footer">THIS IS SOME FOOTER INFORMATION.  WE DON'T WANT TO PRINT THAT

EITHER.<BR/>
<a href="#" onclick="window.print();return false;">Print</a>
</div>
</body>
</html>




basically you can setup your page to hide things that you don't want printed (images, banners, navigation, etc) by using display:none;  you can also do all kinds of fancy css stuff like adjust the text size of the stuff you do want printed. read up on it at http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777397
oh and this isnt limited to a javascript print call....it would print up like this if you go to File Print
0
 

Author Comment

by:vishrutsumit
ID: 11777597
sorry guys..It is my first experience with this site,I couldn't divide the points correctly.
I regret for that.
anyway..will take care for future questions.
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11777642
just curious if the css suggestion and link helped you figure it out
0
 

Author Comment

by:vishrutsumit
ID: 11777888
Just looking at it,will appreciate if you please provide more help if you can.

thanks
vishrut
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11778160
To add on to what Bustarooms was saying, if you want something else to be invisible during viewing but visible during print, you'd just have this:

<style>
.visiblePrintOnly {display:none;}
@media print {
    .banners, .footer{display:none;}
   .visiblePrintOnly {display:block;}
}
</style>
0
 

Author Comment

by:vishrutsumit
ID: 11778249
ok,thanks a bunch.Let me work on this.

vishrut
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question