jQuery 表单回调兼容性问题

发布于 2024-08-14 08:38:26 字数 2442 浏览 3 评论 0原文

我的网站上有一份表格 (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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

情徒 2024-08-21 08:38:26

难道只是淡入淡出不起作用吗?这些行看起来很可疑:

  formWrapper.height(formWrapper.height());
  formBlurb.height(formBlurb.height());

你为什么要设置已经存在的高度?

Is it just the fade that doesnt work? These rows looks suspicious:

  formWrapper.height(formWrapper.height());
  formBlurb.height(formBlurb.height());

Whay are you trying to set a height that is already there?

紅太極 2024-08-21 08:38:26

罪魁祸首似乎是“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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文