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

How to do login inside a jQuery fancybox? Symfony

  • SOLVED

We are using Propel with Symfony 1.4.

We are using sfGuardUserPlugin.

We are using jQuery 1.4.3.

We are using FancyBox 1.3.4.

FancyBox is described here:

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

When a user wants to login, how do I get the login form to appear inside of FancyBox?

Answers (1)

2012-12-07

Milena Dimitrova answers:

Provided that your login page route is configured like this:

sf_guard_signin:
url: /login
param: { module: sfGuardAuth, action: signin }


then you can create a link to it as follows:

<?php echo link_to('login', '@sf_guard_signin', array('id'=>'login')); ?>

and attach fancybox on document ready:

<script type="text/javascript">
$(document).ready(function() {
$("#login").fancybox();
});
</script>


So, when the user clicks on the 'login' link (for example but it can be also button...) they will see the login form in a modal FancyBox.

If you have attached FancyBox than you can trigger click method so as to start FancyBox on page load:


<script type="text/javascript">
jQuery(document).ready(function() {
$("#login").trigger('click');
});</script>


Lawrence Krubner comments:

Yes, I understand that. The problem goes deeper:

What if the user receives an email with a link to:

http://www.thisdomain.com/account/myApps

The user clicks the link and is take to that URL, but that happens to be a secure page, so the login screen will be shown, because the user has not yet logged in.

How do I get the login screen to show up in Fancybox then?

I did this once in 2009 but I completely forget how to do it. The last time I did this, I think the login screen was actually being shown twice, once in the dimmed background, and once in the foreground in the Fancybox.

I suppose I could add some Javascript that automatically did the same as click on the link? Or just run the Fancybox function on every page load of the signin form?


Lawrence Krubner comments:

This:

<script type="text/javascript">
jQuery(document).ready(function() {
$("#login").trigger('click');
});</script>


leads to an infinite loop, as the page loads the page and then that page loads in Fancybox and then attempts to load itself again inside of a Fancybox inside of the Fancybox, etc,


Lawrence Krubner comments:


I experimented with setting a variable on the page load and then, since I'm in an iframe, checking to see if the variable is set in the parent. This let me break out of the infinite loop. Your suggestion works, implemented like this. I imagine there is something more graceful that could be done, but this works for now.

<script type="text/javascript">
jQuery(document).ready(function() {
if (typeof document.has_already_loaded_login_form_inside_of_fancybox == "undefined") {
if (typeof parent.document.has_already_loaded_login_form_inside_of_fancybox == "undefined") {
parent.document.has_already_loaded_login_form_inside_of_fancybox = true;
document.has_already_loaded_login_form_inside_of_fancybox = true;
$("#user_auth_link").trigger('click');
}
}
});
</script>