Close Fancybox iframe on form submit using BUTTON

Question

According to the Fancybox API, I am using the following code in an iframe:

<form>

... // form fields here

<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

The form actually closes when 'Save' is clicked -- but the form content is not submitted. It's like the close event is triggered before the form actually submits its content.

Without the onclick, content is submitted, but the subsequent page opens inside the iframe -- not what I want.

Is there a way around this?

Thanks for helping.

Answer 1

for other readers still having trouble getting fancybox to close from an iframe, it may be an issue with iframe being from a different origin as the parent window. that was the issue i was running into. Rob W provided an excellent solution using postMessage here Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

Answer 2

This one works perfect me:

$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');

All other things didn't work.

Answer 3

You can use event.preventDefault() method like this:

<form>

... // form fields here

<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

Then submit the page using jquery

So it will be better to make it in a function like this:

function closeME()
{
   event.preventDefault(); 
   parent.$.fancybox.close();
   $('#myForm').submit();
}    
    ... // form fields here

    <button onclick="closeME();">
    <span>Save</span>
    </button>



    </form>

<form action="" method="post" id="myForm">
    ... // form fields here
    <button onclick="closeME();">
    <span>Save</span>
    </button>
</form>

    <script type="text/javascript">
        function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
    </script>

Answer 4

I ended up solving this by creating buttons using multiple span (for style purposes) and a few lines of jQuery

<span id="save_btn" class="fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
        <span class="fc-button-inner">
            <span class="fc-button-content save_button">Save</span>
            <span class="fc-button-effect">
                <span></span>
            </span>
        </span>
</span>

<script>
$('#save_btn').click(function() {
  $('#my_form').submit();
});
</script>