Ask your JavaScript questions! Pay money and get answers fast! (more info)

How do I break out of Fancybox when I submit a form? JavaScript

  • SOLVED

jQuery 1.4.3

Fancybox 1.3.4

We have a client who has a website where users can log in and interact with forms to customize the look and feel of their own websites.

Most of the time, when a user is editing the configuration options for their website, the user will be interacting with a form that we show inside of Fancybox.

[[LINK href="http://fancybox.net/api"]]http://fancybox.net/api[[/LINK]]

So a user might want to edit their "About" page. So they click a link, and inside of the Fancybox, the form appears that lets them edit their About page. When they hit submit, they stay inside of Fancybox. They could potentially edit their About page 10 times in a row -- they will stay inside of the Fancybox the whole time.

This is mostly what we want: we want the user to be able to stay inside of the Fancybox as they interact with forms.

However, there is one exception: the login form. When the user first logs in, we want to show the login form inside of Fancybox. But once the user submits that form, we need to breakout of the Fancybox and redirect to the page that the user might have previously been going to.

See the attached screenshot for how things go wrong. Right now, when I log in, the page that I wanted to go to appears inside of the Fancybox. This is not what we want.

The code that configures the Fancybox is currently using an iframe:


$(document).ready(function() {
$("a#user_auth_link").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.7,
'type' : 'iframe',
'width' : 700,
'height' : 960,
'onClosed' : function() {
loadScreen(screenNumber);
loadScreenThumbs();
}
});

$(".grid_1_icon").draggable({
revert: true,
revertDuration: 0
});

loadScreen(screenNumber);
loadScreenThumbs();
});


I tried changing this to "inline" but then the form would no longer load at all. I would simply get an error that said "Content could not be loaded."

The form is submitted like this:

<div style="float:left;"> <a class="button-left4" href="#" onclick="document.getElementById('login_form').submit();">Log In</a>


The above Fancybox API page that I linked to above says this:

Hides FancyBox
Within an iframe use - parent.$.fancybox.close();

So I tried putting this inside the onclick handler of the link that does the submit:


<div style="float:left;"> <a class="button-left4" href="#" onclick="document.getElementById('login_form').submit(); parent.$.fancybox.close();">Log In</a>


But this basically cancels the form submit. The Fancybox would disappear, but I was not logged in, and I should have been logged in.

So how can I do the form submit, and then somehow break out of the Fancybox?

Answers (1)

2012-12-07

Rainner Lins answers:

that's because the form that shows in the fancybox window is inside an iframe. you can think of it as like a new tab, or window on your browser, so when the form is submitted, it will show the new page inside the iframe as well.

you can try adding ( target="_parent" ) to the &lt;form tag, which should cause the parent page to catch the form submission.


<form target="_parent" action="..." ...


more info here:

http://www.w3schools.com/tags/att_form_target.asp


Lawrence Krubner comments:

That seems to work.