Question

I’m working in MVC and I want to be able to implement a login system using a popup window.

The part I am stuck on is, when a successful login occurs in the popup window – it then needs to close and a redirect has to happen on the main page. I am struggling to achieve this as I am running into a whole load of scope issues with JQuery.

I create my popup window with this:

window.open('@Url.Action("Login", "User", null, "http")', 'Login', 'height=500,width=300');

It would be nice to be able to prepend var window = to the above code so that I was able to refrence the window I want to close on successful login – but that variable is out of scope from my Login window:

@{
  ViewBag.Title = "Login";
}

<h2>Login</h2>

<p id="login-fail" style="display:none">Incorrect username/password</p>

@using (Html.BeginForm()) {
  @Html.LabelFor(x => x.Email, new { id = "txt-email" })
  @Html.TextBoxFor(x => x.Email)
  <br />
  <label for="txt-password">Password</label>
  <input id="txt-password" type="password" />
  <input type="submit" value="Login" />
}


<script type="text/javascript">
  $(function () {
    var success = '@Model.Success';
    if (success == "True") {
      loginSuccess(this.window);
    }
    var failed = '@Model.Failed';
    if (failed == "True") {
      $("#login-fail").show();
    }
  });
</script>

I refresh the partial view when the form is posted and Jquery checks for success when the page is loaded. On success, I then try to pass the current window to a js function called loginSuccess:

function loginSuccess(elem) { // successful login has occurred
  elem.close();
  window.location = //getRedirect;
}

So far I cannot get the popup window to close, and then I need to focus to my main window when I set my redirect.

I have a javascript file called functions that both my main window and popup each reference. However, the js that creates the popup window is not in the functions file and the window variable is not available to either window.

Long story short, I am attempting to mock the LinkedIn login process, so the code that creates the popup window is invoked by calling IN.UI.Authorize().place(); – which rules out returning the window variable as the code has to remain the same whether I use my mock LinkedIn or the real one.

Would really appreciate any help with this, particularly referencing the popup window somehow and then refocusing to the main window for the redirect.

Answer 1

I found that referencing myfunctions js file from both pages was causing problems as the main page’s js file might be able to reference the child page, but this would be null according to the child page’s js file, etc.

window.opener helped solve the problem for me, by calling the function attached to the parent window:

<script type="text/javascript">
  $(function () {
    var success = '@Model.Success';
    if (success == "True") {
      window.opener.loginSuccess(window);
    }
    var failed = '@Model.Failed';
    if (failed == "True") {
      $("#login-fail").show();
    }
  });
</script>

The popup now closes and redirect occurs on main page.