Solved

javascipt function document.getElementById() gives error.

Posted on 2004-08-11
19
1,818 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

837 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