Empty Fancybox v2 login dialog when reopened

Question

Thank you, Stack Overflow, for this site and service. Here's my question. I will try to make it as clear as possible.

I am working on a site using the Brushed Template by Alessio Atzeni. It has its own customized set of plugins: jQuery, Fancybox v2... plenty of CSSes. I need my site to have a login feature and I was able to get that far. It works almost perfectly except this one, very annoying issue.

So, I am on the site and then I click on "Login". A fancybox appears with all the stuff I want in it... input username, password, and a custom submit button. Error traps are in place and works well. The issue is this: if I close the login box using the X at the corner, then click Login again, the reopened Fancybox is empty.

Here's my HTML for the Fancybox content:

<div style="display:none">
<form id="login_form" method="post" action="">
   <div id="login_error">
      <p><strong>Login</strong></p>
      <p>
         <label for="login_name"><em>Username:</em></label>
         <input type="text" id="login_name" name="login_name" size="30" />
         <label for="login_pass"><em>Password:</em></label>
         <input type="password" id="login_pass" name="login_pass" size="30" />
         <input type="submit" id="login-submit" value="Login" />
      </p>
   </div>
 </form>
</div>

Here's my jQuery Fancybox v2 code:

$('.fixhref a').on('click',function(){   <-This is a fix to a problem with the template
    $("#login").fancybox({
        href        : "#login_form",
        scrolling   : 'no',
        titleShow   : false,
        afterClose  : function(){
            $("#login_error").hide();
        }
    });
});

And this part of my HTML fires up the Fancybox:

<nav id="menu">
   <ul id="menu-nav">
      <li class="current"><a href="#home-slider">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#work">Portfolio</a></li>
      <li><a href="#about">About</a></li>
      <li class="fixhref"><a id="login" href="#">Login</a></li>
   </ul>
</nav>

I have a feeling I need to put all the login dialog's content into a variable then display that everytime Fancybox is fired. But the problem is, I am not very well versed with Javascript or how to pass data between JS and HTML effectively. And herein lies my problem.

Any help would be greatly appreciated or at least, a nudge in the right direction.

Answer 1

Because you put the whole login form into #login_error div in your HTML code and in afterClose function you hide the #login_error div so when you reopened Fancybox the content will be hidden.