Bind event on another window.

Question

I'm working on an image browser/upload feature, and I'm using PHP Image Editor to help me allow users to edit their images once they've been uploaded. Images are not stored on the web server, but on a separate file server. So what I do is: when an image is selected for editing from the image browser page, I download the image from the fileserver to a temp file on the web server, send that temp file to the PHP Image Editor in a new popup window so they can edit it and then I'm stuck.

When the "Save and Close" button is clicked in the new child popup window, it saves all changes on the image back to the temp file, which I then need to upload back to the file server. I'm looking for a way to bind the "Save and Close" button in my new PHP Image Editor popup window from the parent window JS, This will let me know when to upload the temp file back to the file server.

Is it possible to bind to events on a new popup window from its parent?

ie: JS in Parent window

$('a.edit').click(function(event) {
    var $newWindow = window.open(myHREF); // <-- Child Window
    $newWindow.focus();
    return false;
});

When the Child Window finishes loading, it will hold the contents from my phpimageeditor/index.php file and in the DOM is the "Save and Close" button (#btnsave).

Can I target that node (#btnsave) from the JS file in my parent window, since it created the new popup?

Answer 1

Yes, just add the context to your jquery selector:

$('#btnsave',newWindow).bind('whatever',function(){//stuff});