views:

46

answers:

3

Hi,

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!

A: 

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.

Harv
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.
MartinStettner
+1  A: 

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.

Sean Vieira
Wrong. The [`load`](http://api.jquery.com/load-event/) 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
So, is it wrong or is it just syntactically longer?
Harv
@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.
Josh Stodola
@Josh -- *very* nice, I did not know about that. Thanks!
Sean Vieira
@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.
Josh Stodola
@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!
Sean Vieira
+1  A: 

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>");
});
Josh Stodola
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").
MartinStettner