Solved

javascipt function document.getElementById() gives error.

Posted on 2004-08-11
19
1,812 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
Comment Utility
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
Comment Utility
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
Comment Utility
Ah, that's my bad, sorry *looks sheepish*
0
 

Author Comment

by:vishrutsumit
Comment Utility
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
Comment Utility
How come it's not working? Make sure your handlePrint function is in the <head> section.
0
 

Author Comment

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

Expert Comment

by:Zyloch
Comment Utility
Well, you never know until you try ;) Try this:

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

Author Comment

by:vishrutsumit
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:vishrutsumit
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
just curious if the css suggestion and link helped you figure it out
0
 

Author Comment

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

thanks
vishrut
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
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
Comment Utility
ok,thanks a bunch.Let me work on this.

vishrut
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now