wimle wimle - 7 months ago 21
Javascript Question

Empty Fancybox v2 login dialog when reopened

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

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.