1

J'ai un formulaire sur mon site Web (http://www.jakelazaroff.com/#contact) que j'ai envoyé avec jQuery. La fonction de rappel lorsque le formulaire est soumis avec succès est supposée faire disparaître le formulaire; Cependant, pour une raison quelconque, cela ne fonctionne que sur certaines combinaisons navigateur/OS. En ce moment, la liste de compatibilité est la suivante:jQuery Form Callback Compatibility Problème

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 

... qui est une liste étrange (cela fonctionne dans Firefox 3.5.5 sous Mac OS 10.6.2, mais pas dans Firefox 3.5.5 sur Mac Os 10.5.8?). Le code que j'utilise pour valider/soumettre le formulaire, et la fonction de rappel, est la suivante:

// 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 
    }); 
    } 
}); 

Le plugin forme que je l'utilise peut être trouvé à http://malsup.com/jquery/form/, et le plug-in de validation J'utilise peut être trouvé à http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Y a-t-il quelque chose qui me manque et qui rompt la compatibilité?

Merci :)

P.S. Désolé, je n'ai pas formaté l'URL des plugins que j'utilise en tant que liens - je ne peux pas poster plus d'un lien jusqu'à ce que j'ai 10 points de réputation.
P.P.S. Ok, poster cela m'a donné 10 points de réputation supplémentaires, donc les URL des plugins que j'utilise sont maintenant des liens.

+0

+1 aussi vous obtenez 10 points :) Maintenant, vous pouvez éditer votre message! – Rippo

Répondre

0

Est-ce juste le fondu qui ne fonctionne pas? Ces lignes semblent suspectes:

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

Whay essayez-vous de définir une hauteur qui est déjà là?

+0

Je définis explicitement la hauteur de #contactForm à ce que c'est parce que sinon, lorsque le formulaire s'estompe, #contactForm n'aura aucun contenu et se réduira, résultant en le contenu restant faisant un saut laid pour remplir l'espace. En définissant explicitement la hauteur, l'élément conservera sa hauteur même s'il n'y a rien à l'intérieur, ce qui me permettra de le faire glisser de sorte que le reste de la page se déplace doucement pour remplir l'espace vide. – Jake

0

Le coupable semble être l'omission de parenthèses dans "success: formHide". J'avais l'impression que c'était correct, mais apparemment ce n'est pas le cas.