Rudolf Wardanjan Rudolf Wardanjan - 5 months ago 20
jQuery Question

2 Inline fancybox, second fancybox get error "The requested content cannot be loaded"

The second fancybox will give me an error "The requested content cannot be loaded" the register. The inlog fancybox works fine for me what's the problem? I Googled it they said something with iframe type but when I do that the loading icon will rotate constantly and don't show the content.

jQuery

$(document).ready(function() {
$("a.inlog").fancybox({
maxWidth : 250,
maxHeight : 100,
fitToView : false,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
$(document).ready(function() {
$("a.register").fancybox({
maxWidth : 250,
maxHeight : 100,
fitToView : false,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});


HTML

<div class="login-bottom"> <a class="decoration inlog" href="#inlog"><span class="knop-text">login</span></a>

<div id="inlog" style="display: none;">
<form class="form" action="">
<label>Gebruikersnaam:</label>
<input class="input" type="text" name="fname" />
<br />
<label>Wachtwoord:</label>
<input class="input" type="password" name="lname" />
<br />
<input class="submit" type="submit" value="login" />
</form>
</div>
</div>
<div class="login-bottom"> <a class="decoration register" href="#register"><span class="knop-text">registreer</span></a>

<div id="#register" style="display: none;">
<form class="form" action="">
<label>Gebruikersnaam:</label>
<input class="input" type="text" name="fname" />
<br />
<label>Wachtwoord:</label>
<input class="input" type="password" name="lname" />
<br />
<label>LoL gebruikersnaam:</label>
<input class="input" type="text" name="fname" />
<br />
<label>E-mail:</label>
<input class="input" type="text" name="fname" />
<br />
<input class="submit" type="submit" value="login" />
</form>
</div>
</div>

JFK JFK
Answer

You should refer to a specific selector using # for IDs or . (dot) for classes in your jQuery code but not in your html so this

<div id="#register" ...

should be this

<div id="register" ...

working after correction JSFIDDLE