pass value/variable from fancybox iframe to parent

Someone33 picture Someone33 · May 15, 2014 · Viewed 11.7k times · Source

I'am trying to pass a variable/ value from the fancybox iframe to the parent window without success.

Fancybox is launched from a link with

   class="fancybox fancybox.iframe"

My code in the fancybox.iframe is:

$(document).ready(function(){
   $('.insert_single').click(function(){
    var test =  $('.members_body').find('{row.U_USERNAME}');
    setTimeout(function(){ parent.$.fancybox.close();},300);return true;

   });
});

Where '{row.U_USERNAME}' is the username to find in the iframe.

Then, in the parent there's the following code:

 $(document).ready(function(){
 $('.fancybox').fancybox(

  {
openEffect:'fade',
openSpeed:500,


    afterClose: function(){
    alert($(".fancybox-iframe").contents().find(test)); 
    $('#form input[name=username]').val()(test);return false;
    }
}                   

  );
 });

But when the fancybox is closed, there's no alert showing up with the variable "test", nor the variable is showing up as a value or as a text in the input field of the form.

I've read and tried various solutions found here on stackoverflow without success.

Thanks in advance for helping

EDIT

Here's an Example

Answer

arvic.rivera picture arvic.rivera · May 15, 2014

When the fancybox is closed the iframe is removed from the document. So you must use beforeClose event instead of afterClose

$(document).ready(function() {
    $('a.fancybox').fancybox({
        openEffect:'fade',
        openSpeed:500,
        beforeClose: function() {
            // working
            var $iframe = $('.fancybox-iframe');
            alert($('input', $iframe.contents()).val());
        },
        afterClose: function() {
            // not working
            var $iframe = $('.fancybox-iframe');
            alert($('input', $iframe.contents()).val());
        }
    });
});

JSFiddle: http://jsfiddle.net/NXY7Y/1/

EDIT:

I edited your jsfiddle (http://jsfiddle.net/NXY7Y/9/). Update is in this link http://jsfiddle.net/NXY7Y/13/

Main page javscript:

$(document).ready(function() {
    $('a.fancybox').fancybox({
        openEffect:'fade',
        openSpeed:500//,
        //beforeClose: function() {
        //    // working
        //    var $iframe = $('.fancybox-iframe');
        //    alert($('input', $iframe.contents()).val());
        //},
        //afterClose: function() {
        //    // not working
        //    var $iframe = $('.fancybox-iframe');
        //    alert($('input', $iframe.contents()).val());
        //}
    });
});

function setSelectedUser(userText) {
    $('#username').val(userText);
}

No need to use afterClose or beforeClose events. Just access the parent function setSelectedUser from the iframe on link click event like this:

$(document).ready(function() {
    $('a.insert_single').click(function() {
        parent.setSelectedUser($(this).text());
        parent.$.fancybox.close();
    });
});