pass value/variable from fancybox iframe to parent

Question

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         


        

Answer 1

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();
    });
});

Answer 2

Some clarifications :

• You should use .find() to find elements by selector (you are trying to find a variable .find(test), which is not a valid format).
• You should use .val() to get the contents of an input field or .val(new_value) to set the contents of an input field
• You should use .html() or .text() to get the contents of any element other than input,

example: having this html code

<p class="test">hola</p>

... and this jQuery code

var temp = $(".test").html();

... temp will return hola.

On the other hand, if you have control over the iframed page and it's under the same domain than the parent page, then you may not need to set any jQuery in the child page.

so, having this html in the child (iframed) page for instance

<div class="members_body">
    <p>GOOGLE</p>
    <p>JSFIDDLE</p>
    <p>STACKOVERFLOW</p>
</div>

You could set this jQuery in your parent page to get the contents of any clicked element in your child page :

var _tmpvar; // the var to use through the callbacks
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "iframe",
        afterShow: function () {
            var $iframe = $('.fancybox-iframe');
            $iframe.contents().find(".members_body p").each(function (i) {
                $(this).on("click", function () {
                    _tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html();
                    $.fancybox.close();
                }); // on click
            }); // each
        },
        afterClose: function () {
            $('#form input[name=username]').val(_tmpvar);
        }
    });
}); // ready

Notice that we declared the var _tmpvar globally so we can use it within different callbacks.

See JSFIDDLE