开发者

jQuery Form Callback Compatibility Issue

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开发者_C百科.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.


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?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜