/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] HTML not displaying in new window

I’m writing a webpage that uses JS to copy the tag elements STYLE and a table into a new window that is not displaying content from using .cloneNode() I’ve used alerts to verify that the command is getting all the HTML but in the new window, the table is not being displayed but the last bit is. Since I’m using only one strings to handle the entire HTML of the new page, I’m missing why only part of the string is sent to the new window. It’s a real pain to debug since because the new window is generated entirely with JS, there is no source for me to see exactly what is happening. Here’s the code for what I’m talking about:

[code=php]printPIM = function() {
w = window.open(“about:blank”, “printWP”, “scrollbars=no,directories=no,resize=no,width=1020,height=700,toolbar=no,menubar=yes,copyhistory=no”);
w.focus(); // Makes sure the new page isn’t hidden
style = pimStyle.cloneNode(true);
p = pimTable.cloneNode(true);
wt = “<html><head><title>” + PIMName + ‘</title><style type=”text/css” media=”print, screen”>’ + style.innerHTML + ‘</style></head><body>’;
wt += “<table id=’pimTable’>” + p.innerHTML + “</table>”; // Adds the PIM table
wt += ‘<div style=”text-align: center;”><h1>Total Distance: ‘ + parseFloat(TotalDistance).toFixed(precision) + ‘nm</h1></div>’;
wt += ‘</body></html>’;
wt.replace(“<tbody></tbody>”,””); // Remove extra tbody element
w.document.writeln(wt);
return false;
}[/code]

The only thing displayed is the contents of the DIV element. Thanks!

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@KorJul 14.2010 — cloneNode() - and all the other DOM methods should be used along with DOM methods. write() and writeln() are not DOM. Nor [B]innerHTML[/B], after all.
Copy linkTweet thisAlerts:
@ROK_RASHauthorJul 14.2010 — I found that the problem actually lay with the CSS because this table is originally set to visibility: hidden and once I created a new class that set it to visible, it displayed properly.
Copy linkTweet thisAlerts:
@KorJul 14.2010 — OK, then. But keep in mind that if, for a reason or another, innerHTML does not properly work, you have the second chance with DOM methods.
Copy linkTweet thisAlerts:
@ROK_RASHauthorJul 14.2010 — I'm all ears for a better way to code JS. I tried to find some documentation on the ins and outs of DOM and couldn't make sense of it, so I stuck with the old way.

Understanding DOM is a gift I have yet to receive.
Copy linkTweet thisAlerts:
@KorJul 14.2010 — well, [B]innerHTML[/B] is a useful method, but sometimes it might brings errors. It is faster than DOM methods, but DOM methods are more elaborate and safer. Usually, you should apply innerHTML and see the result. If something goes wrong, switch to standard DOM methods.

About DOM

http://www.howtocreate.co.uk/tutorials/javascript/domstructure

http://www.w3schools.com/htmldom/dom_methods.asp

It is true that you will find, in all the tutorials, [B]innerHTML[/B] as belonging to the DOM methods (or sometimes, more correctly, among the DOM [I]properties[/I]). It is not true. [B]innerHTML[/B] was initially designed by MS Internet Explorer crew, and it has been implemented lately in all the browsers, as it is an useful method. Fast and easy. But, in fact, it is not a part of the DOM W3C Recommendations, which means it is not a [I]standard[/I] method.

Anyway, [B]innerHTML[/B] is crossbrowser. Except that, paradoxically, it has some problems exactly within the browsers of its creators, in IE ?
×

Success!

Help @ROK_RASH spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...