I need to be able to copy the current webpage into a new popup window for a print preview. There is a grid on the page with children, so if they expand one of the rows to see the child rows, I need to show this in the new window.
Is this possible?
I currently have the popup window open up the same page, but all none of the rows are expanded.
Encode the state of open/closed rows into a query string format (like "open=row1+row5+row10") and pass this string in an url to a newly opened window (like "host.com/blah.html?open=row1+row5+row10"). On the target page, in the onload function examine the location object and expand these rows once again.
You can also use JavaScript to access the pop-up window and call functions like "hideRow(x)". I'll add a better example when I get home (iPod touch is no fun to type code on)
Perhaps this does the trick (in IE and Firefox, not in Opera. Don't know about WebKit):
var yourDOCTYPE = "<!DOCTYPE html..."; // your doctype declaration
var printPreview = window.open('about:blank', 'print_preview');
var printDocument = printPreview.document;
printDocument.open();
printDocument.write(yourDOCTYPE+
"<html>"+
document.documentElement.innerHTML+
"</html>");
printDocument.close();
(Note the difference between window.open() and document.open()!)
However, you will lose all custom DOM thingies, like event handlers and so on. Nonetheless, it might work if you just want to copy 'n paste your HTML.
Are you just hiding/showing your rows with display:none;? How are you loading up the popup page? If you're reloading the page again, you could use AJAX to pass a dataset to the target page.
Assign a unique ID to each row, and for each row that is expanded, add the row's ID into an array. Pass that array or object as a data member via AJAX when your print preview function is called, then expand the applicable rows in your onsuccess callback function after the page is loaded.