我正在尝试使用fancybox来显示像bellow
这样的登录表单<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
<p>
<em>Leave empty so see resizing</em>
</p>
</form>
</div>
java脚本是
$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
html是
<a id="tip5" title="Login" href="#login_form"><?php echo "Login" ; ?></a>
当我点击登录链接时,它会显示登录弹出窗口,但是当我点击提交按钮时,它会关闭弹出窗口并刷新页面。
实际上它应该检查数据并在弹出窗口上显示数据而不是刷新页面。
由于
答案 0 :(得分:1)
可能会有更多问题:
live
而不是bind
。我也更喜欢使用event.preventDefault()
而不是返回false ...我的JS代码将是:
$("#login_form").live("submit", function(e) {
e.preventDefault();
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
});