Question

178

Callback for a popup window in JavaScript

rated 0 times [ 181] [ 3] / answers: 1 / hits: 22200 / 12 Years ago, fri, may 25, 2012, 12:00:00

I hope I did my homework well, searching the Internets for the last couple of hours and trying everything before posting here, but I'm really close to call it impossible, so this is my last resort.

I want a simple thing (but seems like hard in JavaScript):

Click button -> Open Window (using window.open)

Perform an action in the popup window and return the value to parent (opener)

But I want to achieve it in a systematic way, having a callback defined for this popup; something like:

var wnd = window.open(...)

wnd.callback = function(value) {

    console.log(value);

};

I've tried defining the callback property in popup window JS code:

var callback = null;

Unfortunately, that does not work, as...

$('#action').click(function() {

    console.log(callback);

});

... returns just that null I set initially.

I've also tried setting the callback in a parent window after window load (both thru window.onload=... and $(window).ready()), none worked.

I've also tried defining some method in child window source code to register callback internally:

function registerCallback(_callback)

{

    callback = _callback; // also window.callback = _callback;

}

But with the same result.

And I don't have any more ideas. Sure, it would be simple setting the value using window.opener, but I'll loose much of a flexibility I need for this child window (actually an asset selector for DAM system).

If you have some ideas, please share them.
Thank you a million!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaidyn

Add To Favorites

Follow

Total Points: 633

Total Questions: 102

Total Answers: 100

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

1 Year ago

answered 12 Years ago quentinaveryb · Accepted Answer

After few more hours of experiments, I think, I've found a viable solution for my problem.

The point is to reference jQuery from parent window and trigger a jQuery event on this window (I'm a Mac user but I suppose, jQuery has events working cross-platform, so IE compatibility is not an issue here).

This is my code for click handler on anchor...

$(this).find('a[x-special=select-asset]').click(function() {

    var evt = jQuery.Event('assetSelect', {

        url:        'this is url',

        closePopup: true,

    });

    var _parent = window.opener;

    _parent.jQuery(_parent.document).trigger(evt);

});

... and this is the code of event handler:

$(document).bind('assetSelect', function (evt) {

    console.log(evt);

});

This solution is fine, if you don't need to distinguish between multiple instances of the asset selection windows (only one window will dispatch assetSelect event). I have not found a way to pass a kind of tag parameter to window and then pass it back in event.

Because of this, I've chosen to go along with (at the end, better and visually more pleasant) solution, Fancybox. Unfortunately, there is no way - by default - to distinguish between instances either. Therefore, I've extended Fancybox as I've described in my blog post. I'm not including the full text of blog post here, because is not the topic of this question.

URL of the blog post: http://82517.tumblr.com/post/23798369533/using-fancybox-with-iframe-as-modal-dialog-on-a-web