Add target=“_top” to Expression Engine Login Form Tag

Question

I'm using the login form tag inside of a fancybox iframe.

For my return parameter, I'm using <?php echo $_SERVER['HTTP_REFERER']; ?>, so that it takes the user back to whichever page they started from. Unfortunately, it takes them back to that page within the iframe.

How do I add a target="_top" attribute to the return link, or some other jQuery call that will close the iframe and manage the redirect within the parent window?

Thanks,

ty

Answer 1

The solution was to not use the EE login form tag, but rather hard code the form. That allowed the addition of a target attribute:

<form method="post" action="http://domain.com/" target="_top"  >
<div class='hiddenFields'>
<input type="hidden" name="XID" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
<input type="hidden" name="ACT" value="12" />
<input type="hidden" name="RET" value="<?php echo $_SERVER['HTTP_REFERER']; ?>" />
<input type="hidden" name="site_id" value="1" />
</div>

Thanks for the help.

ty

Answer 2

It seems to me that you probably want to return to an interstitial page that does a few things:

1. closes the fancybox ( call $.fancybox.close() )
2. does a redirect to the desired page based on some param ( e.g. {redirect='{segment_2}'} )

FWIW, -s.

Answer 3

Use this free add-on http://devot-ee.com/add-ons/page-history to get the last page visited (or previous to last) instead of using HTTP_REFERER.

Either set as part of your form (hidden field for RET), or output into the JavaScript controlling the form submission (or page the form submits to.

<input type="hidden" value="{exp:page_history:get page=‘1’}" name="RET"/>

You could have some Jquery on the result page that redirects to the same page without but not inside the iFrame:

    if (top.location.href != document.location.href) {
        //###   Inside an iFrame   ###
        if (document.location.href.indexOf("/redirected page after login") >= 0) {
            //###   Breakout of iFrame   ###
            $("body").css("display","none"); //Hide to minimise 'flicker'
            top.location.href = document.location.href;
        }
    }

Alternatively have some JavaScript trapping the login form submission that then submits the page via Ajax, then redirects to the chosen URL (you won't need to close the fancybox, just target top.location.href.

Here's example JQuery to send the login form via Ajax with server error checking responses:

//###   LOGIN FORM SUBMISSION   ###
function SubmitLogin() {
    //###   Send form via AJAX   ###
    $.ajax({
        type: "POST",
        data: $("#login-form").serialize() + "&action=" + $("#login-form").attr("action"),
        dataType: "html",
        success: function (html) {
            //###   Successfully received an html page from the server   ###
            if ( html.search(/error/i) >= 0 ) {
                if (html.search(/username you submitted was not found/i) >= 0) {
                    $("#login-username").addClass('error');
                    $("#login-username").after('<label class="error" for="login-username" generated="true">Email address doesn\'t exist<br />Re-check or register an account</label>');
                } else if (html.toLowerCase().indexOf("account does not exist") != -1) {
                    //Do appropriate selection & error message
                } else if (html.search(/You did not submit a valid email address/i) >= 0) {
                    //Do appropriate selection & error message
                } else if (html.search(/captcha/i) >= 0) {
                    $("#captcha").addClass('error').after('<label class="error" generated="true">' + $("#captcha").attr('title') + '</label>')
                } else if (html.search(/password/i) >= 0) {
                    $("#login-password").addClass('error');
                    $("#login-password").after('<label class="error" for="login-username" generated="true">You have entered an incorrect password</label>');

                } else if (html.search(/already logged in/i) >= 0) {
                    $("#login-butn").after('<label class="error" for="login-username" generated="true">User already logged in!</label>');

                } else if (html.search(/account has not been activated yet/i) >= 0) {
                    $("#login-butn").after('<label class="error" for="login-username" generated="true">Account has not been activated yet<br />Check your email and activate</label>');

                } else {
                }

            } else {
                //###   Successfully Logged in   ###
                top.location.href = "where ever you want to go";
                // Target RET field of form here...?
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //###   Error occurred, could be server, CMS or 404   ###

        }
    });
} //###   End of SubmitLogin function   ###

This is just an example based on some EE1 error messages, which I've updated with a couple of ones from EE2, so should give you a start if you choose to go down the Ajax route of submission and therefore redirection.

Answer 4

My suggestion would be to not use an iframe in your FancyBox, but just a hidden fragment on your page which contains your login form. This way you don't have to modify anything, as the login form will always be loading on the current page.

Just take everything starting from your #pageheader div in your login_form template, put it in a div called #login somewhere in your global template (header, footer, wherever), and hide it with some javascript (or, if you like, with CSS). Then just link to "#login" instead of "/home/login_form".

You can remove the type: 'iframe' parameter from your FancyBox jQuery call - FancyBox is smart enough to determine what it's loading based on the link (in the case of a fragment link like this, it will set itself to "inline" mode).

If the login form is in a global embed, you can just enable PHP in that embed alone. Or if you're using a snippet, use the Current plugin instead, so you don't have to enable PHP in all of your templates.