文章/答案/技术大牛

发布

社区首页 >问答首页 >我的Jquery工具Ajax模式登录在IE7和8中不起作用

问我的Jquery工具Ajax模式登录在IE7和8中不起作用
EN

Stack Overflow用户

提问于 2011-09-11 22:38:34

回答 2查看 674关注 0票数 0

我正在处理模式登录/注册表单。我不擅长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目录。如果您每次都更改输入"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功夫不是很强:-(

下面的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" : "")
    };
});

ajax

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-09-11 23:39:10

您可以使用$.ajax并将缓存选项设置为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();
    }
});

票数 1

Stack Overflow用户

发布于 2011-09-15 04:59:09

你试过了吗？

$.ajaxSetup({
   cache: false
 });

在文档的开头准备好了吗？看起来确实像是jQuery缓存的问题。如果这有帮助，它肯定是有帮助的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7378924

复制

相似问题

问我的Jquery工具Ajax模式登录在IE7和8中不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的Jquery工具Ajax模式登录在IE7和8中不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的Jquery工具Ajax模式登录在IE7和8中不起作用
EN