0
私はモーダルログイン/登録フォームを作成中です。私はJavascriptに賛成ではありませんが、AjaxコールのためにJqueryを動作させるためにハッキングしました。すべてChrome 14.0.835.159 beta-m、Firefox 5と6.0.2、Opera 11.51でうまく動作しています。 Firebugを使用して、JSONが正しく返され、エラーメッセージが更新されるのを確認しました。My Jquery tools IE 7,8でAjaxモーダルログインが機能しない
ユーザー名とログイン名を空白にして、モーダルウィンドウのログインボタンをクリックすると、返信は失敗したログインをカウントアップして戻ります。私はfirebuggerhttp：//www.firebuggerを使用しましたあなたは空白のフォームフィールドを離れる場合.COM/
でIE 7で何が起こっていたかで、そして8見て、フォームが何らかの形で「キャッシュされ」ていると、コールが通過does notのようです。 loginMsg divを更新するために、ログインjavascriptで返されることはありません。あなたは毎回入力を変更する場合は、
:-(意図したように、「ASD」「として」「A」、復帰は失敗したログインをカウントアップが、まだ私のdiv
の更新なし非常に奇妙テストページがcamarillon.com/testpage.cfm
<!DOCType html>
<html>
<head>
<title>testpage - test ajax login</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" />
<!--- <noscript>This is what you see without javascript</noscript> --->
<CFSET structDelete(session, 'form')>
<cfset session.form.validate_require="username|'Username' is required.;password|'Password' is required.;confirmpassword|'Confirm password' is a required field.;">
<cfset session.form.validate_minlength="username|'Username' must be at least 3 characters long.;password|'Password' must be at least 7 characters long.">
<cfset session.form.validate_maxlength="username|'Username' must be less than 6 characters long.">
<cfset session.form.validate_alphanumeric="username|'Username' must be alphanumeric.">
<cfset session.form.validate_password="confirmpassword|password|'Password' and 'Confirm Password' must both match.">
</head>
<body>
<cfparam name="session.auth.loggedIn" default="false">
<div id="loginMenu">
<cfif session.auth.loggedIn>
<a href="logout.cfm">Log out</a>
<cfelse>
<button class="modalInput" rel="#login">Login</button>
<button class="modalInput" rel="#register">Register</button>
</cfif>
</div>
<!-- user input dialog -->
<cfif isDefined("session.auth.failedLogins")>
<cfset loginMsg=#session.auth.failedLogins# & " failed logins">
<cfelse>
<cfset loginMsg="Please log in">
</cfif>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ccc',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
onClose: function() {
$('.error').hide();
}
});
$("#toomanylogins").overlay({
mask: {
color: '#ccc',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
load: false
});
$("#loginForm").submit(function(e) {
var form = $(this);
// submit with AJAX
$.getJSON("cfcs/security.cfc?method=processLogin&ajax=1&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 if (json === "More than five") {
var tempString
tempString = "<h2>Too many failed logins </h2>"
$("#loginMsg").html(tempString);
triggers.eq(0).overlay().close();
$("#toomanylogins").overlay().load();
} else {
var tempString
tempString = "<h2>" + json + " failed logins</h2>"
$("#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("cfcs/security.cfc?method=processSignup&returnformat=JSON&queryformat=column&" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(1).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>
<!-- yes/no dialog -->
<div class="modal" id="toomanylogins">
<h2>Having problems logging in?</h2>
<p>
If you have forgotten your password you can request a reset.
</p>
<!-- yes/no buttons -->
<p>
<button class="close"> Cancel </button>
</p>
</div>
<div class="modal" id="login">
<!-- login form -->
<form name="loginForm" id="loginForm" autocomplete="off" method="get" action="">
<div id="loginMsg"><h2><cfoutput>#loginMsg#</cfoutput></h2></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">
<fieldset>
<p>
<label>firstname *</label>
<input id="firstname" type="text" name="firstname" placeholder="firstname..." required="required"/></p>
<p>
<label>lastname *</label>
<input type="text" name="lastname" placeholder="lastname..." required="required"/></p>
<p>
<label>email *</label>
<input type="email" name="email" placeholder="email..." required="required"/></p>
<p>
<label>username *</label>
<input type="text" name="username" placeholder="username..." required="required"/>
</p>
<p>
<label>password *<br>
<input type="password" name="password" required="required" placeholder="password..." /></label>
</p>
<p>
<label>confirm password *<br>
<input type="password" name="confirmpassword" data-equals="password" placeholder="password..." required="required"/></label>
</p>
<p>
<button type="submit">Sign Up</button>
<button type="button" class="close"> Cancel </button>
</p>
</fieldset>
</form>
</div>
</body>
</html>
バックエンドでColdFusionであるが、私はthatsのは、関連するとは思わない、JSONのリターンが
などFFでうまく動作する私が推測するかについての任意のポインタがでいくつかのバグです私のJavascriptは高く評価しました。私のJQuery kung fooは強くない:-(
以下Logansソリューションは、私も間違っているだけIE 5-7で
$.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("[minlength]", function(input, value) {
var min = input.attr("minlength");
return value.length >= min ? true : {
en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : "")
};
});
うまくいきました。末尾のカンマは常に迷惑です。 Firebug Firefox拡張機能とIE8の開発ツールを使用する方法を習得することをお勧めします。構文エラーや壊れたコードを見つけるのはとても簡単です。 – loganfsmyth