我正在使用Jquery工具测试ajax模态登录
这是我的测试页。
<cfparam name="session.auth.isLoggedIn" default="false">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery modal logon test</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!--- add styles --->
<!--- <link rel="stylesheet" type="text/css" href="css/loginbox.css" /> --->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<style>
/* error message */
.error {
height:15px;
background-color:#FFFE36;
font-size:13px;
border:1px solid #E1E16D;
padding:4px 10px;
color:#000;
display:none;
z-index: 9999;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0 0 6px #ddd;
-webkit-box-shadow:0 0 6px #ddd;
}
.error p {
margin:0;
}
.modal {
background-color:#fff;
display:none;
width:350px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
background:url(/img/global/info.png) 0 50% no-repeat;
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
</style>
</head>
<body>
<p>
<div id="loginMenu">
<cfif session.auth.isLoggedIn>
<a href="logout.cfm">Log out</a>
<cfelse>
<a href class="modalInput" rel="#login">Login</a>
</cfif>
<a href class="modalInput" rel="#register">Register</a>
</div>
</p>
<!-- user input dialog -->
<cfif isDefined("session.auth.failedLogins")>
<cfset loginMsg=#session.auth.failedLogins# & " failed logins">
<cfelse>
<cfset loginMsg="Please log in">
</cfif>
<div><em/></div>
<div class="modal" id="login">
<!-- login form -->
<form name="loginForm" id="loginForm" autocomplete="off">
<div id="loginMsg"><p><cfoutput>#loginMsg#</cfoutput></p></div>
<p><input type="text" name="username" placeholder="username..." title="Must be at least 8 characters." required="required" ></p>
<p><input type="password" name="password" placeholder="password..." title="Try to make it hard to guess" required="required"></p>
<p>
<button type="submit"> Login </button>
<button type="button" class="close"> Cancel </button>
</p>
</form>
</div>
<div class="modal" id="register">
<!-- signup form-->
<form id="signupForm" autocomplete="off" method="get" action="" novalidate="novalidate">
<CFSET structDelete(session, 'form')>
<cfset session.form.validate_require="username|'Username' is a required field.;password|'Password' is a required field.;confirmpassword|'Confirm password' is a required field.;">
<fieldset>
<p>
<label>username *<br>
<input type="text" name="username" placeholder="username..." /> </label>
</p>
<p>
<label>password *<br>
<input type="password" name="password" required="required" minlength="6" placeholder="password..." /></label>
</p>
<p>
<label>confirm password *<br>
<input type="password" name="confirmpassword" data-equals="password" placeholder="password..."/></label>
</p>
<p>
<button type="submit">Sign Up</button>
<button type="button" class="close"> Cancel </button>
</p>
</fieldset>
</form>
</div>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
onClose: function () {
$('.error').hide();
}
});
$("#loginForm").submit(function(e) {
var form = $(this);
// submit with AJAX
$.getJSON("/yourGPpractice/cfcs/security.cfc?method=testSignup&returnformat=JSON&queryformat=column&" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else {
var tempString
tempString = "<p>" + json + " failed logins</p>"
$("#loginMsg").html(tempString);
}
});
// prevent default form submission logic
e.preventDefault();
});
// initialize validator and add a custom form submission logic
$("#signupForm").validator().submit(function(e) {
var form = $(this);
// client-side validation OK.
if (!e.isDefaultPrevented()) {
// submit with AJAX
$.getJSON("/yourGPpractice/cfcs/security.cfc?method=testSignup&returnformat=JSON&queryformat=column&" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else {
form.data("validator").invalidate(json);
}
});
// prevent default form submission logic
e.preventDefault();
}
});
$.tools.validator.fn("[minlength]", function(input, value) {
var min = input.attr("minlength");
return value.length >= min ? true : {
en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
};
});
$.tools.validator.fn("[data-equals]", "Value not equal with the $1 field", function(input) {
var name = input.attr("data-equals"),
field = this.getInputs().filter("[name=" + name + "]");
return input.val() == field.val() ? true : [name];
});
});
</script>
</body>
</html>
安全。CFC包含以下方法
<cffunction name="testSignup" access="remote" returnType="any" output="false">
<cfset var validationVar= structNew()>
<cfset validationVar = true>
<cfreturn validationvar>
</cffunction>
在Firebug中，我可以看到返回是'true'，并且在我的虚拟登录中，loginmenudiv正确地更改为'logout'。然而，这发生在不被取消的模态层下。
triggers.eq (0) .overlay () .close ();正确关闭登录表单的模态，但不取消注册表单的覆盖，尽管下面的行确实正确地将'loginmenu'div更改为log out， 下的模态。发生什么事了?
真让人恼火。
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
alert("about to close the overlay!");
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
警报显示，但触发器。eq(0).overlay().close();不是吗? ?
就像用return false;替换e.preventDefault();一样简单
找到了，在$("#signupForm").validator().submit(function(e) {
// close the overlay
triggers.eq(1).overlay().close();
ie引用第二个叠加触发器作为2个项目，javascript引用开始于0