window.open and $(document).ready

Question

I am trying to make a bookmarklet that opens a popup window. Inside this window is a list of CSS classes that once selected, highlights that object on window.opener page. So I'm running into two problems.

1. Firebug doesn't work in the popup window, so I can't see what's going on.
2. The window never finishes loading (at least I can tell in Firefox) so the $(document).ready(function(){...}) inside the window never gets executed.

I can't open the popup from a remote location because I run into cross domain issues. Here is some sample code:

<script type="text/javascript">
function makepopup(){
 var popup = '<!DOC'+'TYPE HT'+'ML PUBLIC "-//W3C//DTD HT'+'ML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' +
 '<ht'+'ml><he'+'ad><title>Test</title>' +
 '<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></scr'+'ipt>' +
 '</he'+'ad><bo'+'dy>' +
 '<div id="wrap">' +
  'testing popup' +
 '</div>' +
 '<input type="button" value="Click Me" />' +
 '<scr'+'ipt type="text/javascript">' + 
 '$(document).ready(function(){' +
 '$(":input").click(function(){ alert($(window.opener.doc'+'ument).find("#test").html()) });' +
 '})' +
 '</scr'+'ipt>' +
 '</bo'+'dy></ht'+'ml>';
 var testpopup = window.open( '','test','toolbar=1,location=0,status=0,width=500,height=450,scrollbars=1' );
 testpopup.document.write(popup);
 return false;
}
</script>

<a href="#" onclick="javascript:makepopup()">Open popup</a>

<div id="test" style="display:none">This is hidden text</div>

If I add the following to the console in the popup $(":input").click(function(){ alert($(window.opener.document).find("#test").html()) });, it works fine, so I'm sure it the document.ready never being called

Or, is there a better way to do this?

Answer 1

Does the $(document).ready fire if you add the following line before the return false?

testpopup.document.close();

This is a wild guess though, and I haven't tested this.

Answer 2

Indeed the document.ready never fires.. (i don't know why ..)

But you can add your script after the html and remove the document.ready since the document is always loaded at that time ..

function makepopup(){
 var popup = '<!DOC'+'TYPE HT'+'ML PUBLIC "-//W3C//DTD HT'+'ML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' +
 '<ht'+'ml><he'+'ad><title>Test</title>' +
 '<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></scr'+'ipt>' +
 '</he'+'ad><bo'+'dy>' +
 '<div id="wrap">' +
  'testing popup' +
 '</div>' +
 '<input type="button" value="Click Me" />'  +
 '</bo'+'dy></ht'+'ml>'+
 '<scr'+'ipt type="text/javascript">' + 
 '$(":input").click(function(){ alert($(window.opener.doc'+'ument).find("#test").html()) });' +
 '</scr'+'ipt>';
 var testpopup = window.open( '','test','toolbar=1,location=0,status=0,width=500,height=450,scrollbars=1' );
 testpopup.document.write(popup);
 return false;
}​

This works ..

[UPDATE] BUt the method from Aistina is the correct way to go.