jQuery 表单回调兼容性问题
我的网站上有一份表格 (http://www.jakelazaroff.com/#contact)我用 jQuery 提交的。表单提交成功时的回调函数应该使表单消失;但是,由于某种原因,这只适用于某些浏览器/操作系统组合。现在,兼容性列表如下:
WORKS
o firefox 3.0, xp
o firefox 3.0.14, vista
o firefox 3.0.15, vista
o firefox 3.5.5, os 10.6.2
v chrome 4.0.249.30, os 10.6.2
o chrome 3.0.195.33, w7
DOESNT WORK
o safari 4.0.4, os 10.6.2
o safari 4.0.3, os 10.5.8
o firefox 3.5.5, w7
o firefox 3.5.5, os 10.5.8
o chrome 3.0.195.33, vista
o = unreproduced, v = reproduced, x = conflicting
...这是一个奇怪的列表(它可以在 Mac OS 10.6.2 上的 Firefox 3.5.5 中运行,但不能在 Mac OS 10.5.8 上的 Firefox 3.5.5 中运行?)。我用来验证/提交表单和回调函数的代码如下:
// hide the form and display success message (called after form is submitted)
function formHide() {
// cache form wrapper and blurb
var formWrapper = $("#contactForm");
var formBlurb = $("#contact .formBlurb");
// set the height of wrapper and blurb
formWrapper.height(formWrapper.height());
formBlurb.height(formBlurb.height());
// fade out required fields message, fade in success message
formBlurb.find(".requiredFields").fadeOut("fast", function() {
formBlurb.find(".thanks").fadeIn("fast");
});
// fade out form
formWrapper.find("form").fadeOut("slow", function(){
// slide up the div so there's no jump
formWrapper.slideUp("slow");
});
}
// cache the form
var form = $("#contactForm form");
// validate the form
$("#contactForm form").validate({
// when errors are made...
errorPlacement: function() {
// turn the background on those elements red
$("#contactForm form .error").animate( { backgroundColor:"#ff6666" }, "fast" );
},
// when submitting the form...
submitHandler: function(form){
$(form).ajaxSubmit({
// use fm.pl as the submission script
url: "cgi-bin/fm.pl",
// hide the form if it's successful
success: formHide
});
}
});
我使用的表单插件可以在 http://malsup.com/jquery/form/,我使用的验证插件可以在http://bassistance.de/jquery-plugins/jquery-plugin-validation/。我是否遗漏了一些破坏兼容性的东西?
谢谢:)
PS 抱歉,我没有格式化我用作链接的插件的 URL - 在我拥有 10 个声誉点之前,我无法发布多个链接。
PPS 好的,发布此内容让我多了 10 个声誉点,因此我正在使用的插件的 URL 现在是链接。
I have a form on my website (http://www.jakelazaroff.com/#contact) that I submit with jQuery. The callback function for when the form is successfully submitted is supposed to make the form fade away; however, for some reason this only works on certain browser/OS combinations. Right now, the compatibility list is as follows:
WORKS
o firefox 3.0, xp
o firefox 3.0.14, vista
o firefox 3.0.15, vista
o firefox 3.5.5, os 10.6.2
v chrome 4.0.249.30, os 10.6.2
o chrome 3.0.195.33, w7
DOESNT WORK
o safari 4.0.4, os 10.6.2
o safari 4.0.3, os 10.5.8
o firefox 3.5.5, w7
o firefox 3.5.5, os 10.5.8
o chrome 3.0.195.33, vista
o = unreproduced, v = reproduced, x = conflicting
...which is an odd list (it works in Firefox 3.5.5 on Mac OS 10.6.2, but not in Firefox 3.5.5 on Mac Os 10.5.8?). The code I use to validate/submit the form, and the callback function, is the following:
// hide the form and display success message (called after form is submitted)
function formHide() {
// cache form wrapper and blurb
var formWrapper = $("#contactForm");
var formBlurb = $("#contact .formBlurb");
// set the height of wrapper and blurb
formWrapper.height(formWrapper.height());
formBlurb.height(formBlurb.height());
// fade out required fields message, fade in success message
formBlurb.find(".requiredFields").fadeOut("fast", function() {
formBlurb.find(".thanks").fadeIn("fast");
});
// fade out form
formWrapper.find("form").fadeOut("slow", function(){
// slide up the div so there's no jump
formWrapper.slideUp("slow");
});
}
// cache the form
var form = $("#contactForm form");
// validate the form
$("#contactForm form").validate({
// when errors are made...
errorPlacement: function() {
// turn the background on those elements red
$("#contactForm form .error").animate( { backgroundColor:"#ff6666" }, "fast" );
},
// when submitting the form...
submitHandler: function(form){
$(form).ajaxSubmit({
// use fm.pl as the submission script
url: "cgi-bin/fm.pl",
// hide the form if it's successful
success: formHide
});
}
});
The form plugin I use can be found at http://malsup.com/jquery/form/, and the validation plugin I use can be found at http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Is there something I'm missing that is breaking compatibility?
Thanks :)
P.S. Sorry I didn't format the URLS of the plugins I'm using as links - I can't post more than one link until I have 10 reputation points.
P.P.S. Okay, posting this gave me 10 more reputation points, so the URLs of the plugins I'm using are now links.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
难道只是淡入淡出不起作用吗?这些行看起来很可疑:
你为什么要设置已经存在的高度?
Is it just the fade that doesnt work? These rows looks suspicious:
Whay are you trying to set a height that is already there?
罪魁祸首似乎是“success: formHide”中省略了括号。我的印象是这没关系,但显然事实并非如此。
The culprit seems to be the omission of parentheses in "success: formHide". I was under the impression that that was okay, but apparently it's not.