Ajax, Modal Log In not closing

Question

I'm having a problem closing a modal login box. Everything seems to be working as far as the modal screen and the ajax functionality, but I'm having problems closing the modal form.

The code is as follows:

HTML:

  <a href="#" class="overlay" id="loginForm"></a>

  <div class="modalForm_box" id="modalBox">
     <h3>Log In</h3>
     <div id="note">
        <!-- Display any Error Message -->
    </div>
     <form class="modalForm" id="ajax-login-form" action="javascript:alert('success!');">
        <input type="hidden" name="action" value="user_login" />
        <!--<input name="novalue" type="hidden" value="" />-->
        <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
        <label for="user_name">Username or Email</label>
        <input name="user_name" class="user_name" value="" type="text">
        <label for="password">Password</label>
        <input name="password" class="password" value="" type="password" />
        <div class="btn-fld">
           <label for="remember_me">Remember me &nbsp;</label>
           <input name="remember_me" class="remember_me" type="checkbox" id="remember_me" style="width:auto">
           <a href="phpMS/forgot.php" title="Password Reminder">Forgotton  password?</a>
           <button name="submit" id="login" type="submit" value="Login">Login...</button>
        </div>
     </form>
     <a class="close" href="#close" id="closeIt"></a>
  </div>

JS:

$(document).ready(function () {
   $("#login").click(function () {
      $("#ajax-login-form").submit(function () {
            var str = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "functions/login.php",
                data: str,
                success: function (msg) {
                    if (msg == 'OK') {
                        $('#modalBox').hide(); // This line works fine.
                        $('#loginForm').hide(); // This line works fine.
                        $('#close').click(); // Does not work.
                        $('#close').trigger('click'); // Does not work.
                        location.reload(); //Some problems
                    } else {
                        $("#note").html(msg); // This line works fine.
                    }
                }
            });
         return false;
      });
   });
});

As you can see from my code notes, if I hide the form and the overlay everything disappears as it should, but when the reload line is executed the modal form and overlay reappear. This also happens if I refresh. Clicking on close then removes the modal form and overlay as it should.

I then attempted to activate the close function, but no matter what I try I'm unable to get this to work either.

All other functionality is fine. Can anyone point me in the right direction plrease?

Answer 1

Error in Close button selector

Try this

$(document).ready(function () {
   $("#login").click(function () {
      $("#ajax-login-form").submit(function () {
            var str = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "functions/login.php",
                data: str,
                success: function (msg) {
                    if (msg == 'OK') {
                        $('#modalBox').hide(); // This line works fine.
                        $('#loginForm').hide(); // This line works fine.
                        $('#closeIt').click(); // This will work.
                        $('#closeIt').trigger('click'); // This will work.
                        location.reload(); //Some problems
                    } else {
                        $("#note").html(msg); // This line works fine.
                    }
                }
            });
         return false;
      });
   });
});

Answer 2

You have an error on your $('#close') selector. Use $('.close') instead or $('#closeIt').