Question

我正在处理模态登录/注册表单。我对Javascript并不擅长，但是在我的Ajax调用中遇到了一些工作Jquery的问题，所有这些都在Chrome 14.0.835.159 beta-m以及Firefox 5和6.0.2以及Opera 11.51中运行良好。我使用Firebug来查看正确返回的JSON并更新错误消息。

在FF / Opera / Chrome中如果我将用户名和登录留空并单击模态窗口上的登录按钮，则返回计算失败的登录并显示返回。我使用了firebuggerhttp：//www.firebugger。 com /看看在IE 7和8上发生了什么。

如果您将表单字段留空，似乎表单以某种方式“缓存”并且调用不会通过。没有任何返回操作我的登录javascript更新loginMsg div。如果每次更改输入，“a”，“as”，“asd”，则返回按预期计算失败的登录，但仍然没有更新我的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中，但我不认为那是相关的，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" : "")
    };
});

Answer 1

您可以使用$ .ajax并将cache选项设置为false，而不是使用$ .getJSON。我认为这个问题解决了这个问题。

$("#loginForm").submit(function(e) {
    var form = $(this);


    $.ajax({
        type: 'GET',
        url: "cfcs/security.cfc?method=processLogin&ajax=1&returnformat=JSON&queryformat=column&" + form.serialize(),
        dataType: "json",
        cache: false,
        success: 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
        $.ajax({
            type: 'GET',
            url: "cfcs/security.cfc?method=processSignup&returnformat=JSON&queryformat=column&" + form.serialize(),
            dataType: "json",
            cache: false,
            success: 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();
    }
});

Answer 2

你试过吗

$.ajaxSetup({
   cache: false
 });

文件开头准备好了吗？真的看起来像jQuery Cache的问题。如果这有帮助，肯定是。

我的Jquery工具Ajax模式登录在IE 7和8中不起作用

2 个答案: