Create new window using jquery

Question

I'm working on a little project in JavaScript/jQuery.

In order to display results from a calculation done in javascript, I'd like to open a new window with some predefined content and modify this content in order to display the results: Im using code like this:

var resultwindow = window.open('result.html')
var doc = $('body', resultwindow.document);
doc.append("<p>Result</p>")

This is not working since the result document is not yet loaded when I append the content, so it is overwritten with the contents of 'result.html'.

I also tried

$(resultwindow.document).ready(function() {
    // ... Fill result document here
})

and

$(resultwindow.document).load(function() {
    // ... Fill result document here
})

but ready() works only on the current document (it is called immediately, if the current document is already loaded), and load doesn't get called at all.

Perhaps someone can point me to the right direction. Thanks in advance!

EDIT:

I finally solved this by creating the new document "by hand" in Javascript like:

w = window.open('','newwinow','width=800,height=600,menubar=1,status=0,scrollbars=1,resizable=1);
d = w.document.open("text/html","replace");
d.writeln('<html><head>' +
  '<link rel="stylesheet" type="text/css" href="style.cs"/></head>' +
  +'<body></body></html>');
// use d to manipulate DOM of new document and display results

If I were to do the same thing today (two years of experience later), I'd use some Javascript template library like Handlebars to maintain a template and compile it to javscript.

@Shaunak I posted my solution from two years ago as edit to the question, also mentioned how I would solve it today... hth. — MartinStettner
– MartinStettner, Commented Aug 9, 2012 at 11:19

Josh Stodola · Accepted Answer · 2012-08-09 18:26:56Z

2

Your load call doesn't work because you're attempting to handle the load of the document, and chances are document does not even exist at this point. Which means you are passing null into jQuery, and it gracefully ignores you. Handle the load event of the raw window reference instead, and then you should be good to go...

var win = window.open("result.html");
$(win).load(function() {
  $("body").append("<p>Result</p>");
});

edited Aug 9, 2012 at 18:26

answered Oct 21, 2010 at 18:13

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartinStettner Over a year ago

Unfortunately, the event handler never gets called. Also the debugger reveals that - at least in Chrome - the document object already exists but is empty ("about:blank").

Sean Vieira · Accepted Answer · 2010-10-21 18:58:14Z

1

The problem you have is that load() doesn't do what you think it does.

Instead, use bind("load", function() { /* Your function here */ }); then everything should work.

Correction:

load() is actually a dual-use function -- if it's called with a function as its first parameter, then it binds it to the load event of the object (or objects) in question, otherwise it loads the returned data (if any) into the elements in question. See Josh's answer for the real reason why it's not working.

edited Oct 21, 2010 at 18:58

answered Oct 21, 2010 at 18:01

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

5 Comments

Josh Stodola Over a year ago

Wrong. The load in jQuery is smart enough. It fires based on parameters passed in. So if you pass in a function only, it knows that you mean the onload event. If you pass in all the required parameters for an AJAX call, it does that.

Josh Stodola Over a year ago

@Harv It is wrong. Load should have worked fine for the OP, and there is a reason it did not. See my answer for a detailed explanation.

Sean Vieira Over a year ago

@Josh -- very nice, I did not know about that. Thanks!

Josh Stodola Over a year ago

@Sean No problem! jQuery has several functions that behave differently depending on arguments. Take attr for example. You pass in one argument, you get an attribute, pass in two arguments and you set an attribute! Kind of crazy.

Sean Vieira Over a year ago

@Josh -- oh, that I know -- it makes it convenient as all get out though. I expected that all of the uses would be documented in one place (or prominently linked to) -- so when I checked api.jquery.com and saw only the one use documented under load, I naively assumed that that was all it did. One deep dive into the source later, and I've learned something new :-D. Thanks again!

Harv · Accepted Answer · 2010-10-21 17:57:45Z

0

Send the data to result.html in the querystring and then have the result.html display the data from there. If you want to be less obvious about it going through you could hash the data in the querystring and have the result page dehash it.

answered Oct 21, 2010 at 17:57

Harv

5556 silver badges17 bronze badges

2 Comments

MartinStettner Over a year ago

The software should also work offline just from the filesystem (i.e. without any web server). Therefore your suggestion is not an option, I think. Thanks anyway.

Harv Over a year ago

Not sure why you would want to build a web page or a series of web pages that don't actually live on some sort of web server.

Collectives™ on Stack Overflow

Create new window using jquery

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related