Opening fancybox on an iframe from form post

Question

I have a form(its just a form in a simulator html for a ecommerce cart since I don't have the cart implemented yet. Its just to type the SKU, name, price, quantity, etc. and post to the checkout screen) and I want to when I click on a button the page posts it's information to a fancybox and I can navigate in it.

So far I managed to make the post be received by the fancybox first page of the checkout(login screen) using Garland's post on this question, but whenever I continue with the flow, logging into the system, it opens on the main window.

The problem I am having is that I can't seem to make fancybox open on an iframe, therefore I lose control after login, closing the fancybox.

my partial html:

<form target="Popup" action="../Account/LogOn" method="post" name="form1" id="form1"> 
    <div style="float: left; width: 500px; left: 50%; top: 20px; margin-left: -250px; position: absolute;">
        <div style="float: left; width: 100%; height: auto; margin-top:20px; text-align:center">
            .
            .
            .
            <input type="button" value="regular purchase" onclick="javascript: SendForm();" style="width:150px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" /> 
            <input type="submit" value="lightbox purchase" style="width:180px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" />
        </div>
    </div>
</form>

my code:

$("#form1").ajaxForm({
        success: function (responseText) {
            $.fancybox({
                type: 'iframe',
                content: responseText,
                fitToView: false,
                width: '70%',
                height: '70%',
                autoSize: true,
                closeClick: false,
                openEffect: 'elastic',
                closeEffect: 'fade',
                helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
                afterClose: function () {
                    location.reload();
                    return;
                }
            });
        }
    });

This code opens a fancybox with the login page and all, but not inside an iframe, just plain divs. Anyone has an idea to work around this issue?

Unfortunately I don't have a link to show it to you guys since i'm still on an early stage development, and it's all localhost so far.

Check Janis' post at http://stackoverflow.com/a/11739627/1055987 specifically the second demo which shows you how to create the iframe (and don't forget to voted it up if that helps you to solve your issue ;) — JFK, Oct 18 '12 at 07:14

score 2 · Answer 1 · answered Oct 20 '12 at 08:06

As I recommended it in my previous comment, based on this example, create the iframe inside your success argument using fancybox's afterShow callback like :

success: function(responseText) {
  $.fancybox.open({
    content   : '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
    width     : '70%',
    height    : '70%',
 // fitToView: false, 
    autoSize: false,
    closeClick: false,
    openEffect: 'elastic',
    closeEffect: 'fade',
    helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
    afterShow : function() {
      var oIframe = document.getElementById('myFrame');
      var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument );
      iframeDoc.open(); 
      iframeDoc.write(responseText);
      iframeDoc.close();
    },
    afterClose: function () {
      location.reload();
      return;
    }
  }); // fancybox
} // success

See WORKING DEMO of the implementation. After submitting the form (also inside a fancybox) the responseText is now inside an iframe (I included some links in the response so you can keep navigating inside fancybox)

Opening fancybox on an iframe from form post

1 Answers1