web-dev-qa-db-fra.com

Cassé jQuery / CSS dans Firefox - ColorBox et reCAPTCHA

Je travaille sur ce qui semble être un formulaire de contact de base. J'utilise le plugin ColorBox pour jQuery pour construire un formulaire avec un lien d'image, qui ouvre ensuite un ColorBox contenant le formulaire reCAPTCHA et le bouton d'envoi du formulaire.

Ce code fonctionne parfaitement à partir de IE7 et même dans une certaine mesure dans IE6, mais dans Firefox, Opera et Chrome, lorsque je clique sur le bouton d'envoi, il apparaît pour supprimer toute la page. si cela passait par un lien réel.

Je suis sûr que je commets une erreur vraiment stupide ici quelque part, alors quelqu'un pourrait-il jeter un coup d'œil rapide à mon code et voir où je me trompe? Ce problème me dérange depuis un moment maintenant et cela stoppe mes progrès avec beaucoup d'autres choses.

EDIT: Silly moi! Je viens de me rendre compte que je n'avais même pas inclus l'URL! Voici le raccourci que j'ai passé sur IRC ...

http://is.Gd/f3M2s

EDIT 2: Lorsque la ColorBox est ouverte, le code suivant est "affiché", en fonction de View Source.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha.js"></script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script>
cssjquerycross-browserfirefoxgoogle-chrome
2
Mike B

Il s’avère que c’est un problème relativement courant pour ceux qui utilisent le plugin PHP de reCAPTCHA. J'ai décidé d'utiliser le code du plug-in pour la partie serveur, mais de construire manuellement le formulaire reCAPTCHA avec le code JavaScript indiqué, il fonctionne désormais parfaitement.

0
Mike B

Changer le bouton submit de type submit à type button empêchera la soumission du formulaire.

http://jsfiddle.net/tfcuA/

Si vous cliquez sur un bouton d'envoi, vous devrez "brouiller" le comportement d'envoi par défaut en renvoyant false ou en utilisant preventDefault de jQuery.

Sinon, avez-vous le code de traitement Captcha déclenché par onsubmit sur le formulaire?.

2
Metalshark

Vous pouvez arrêter l'événement normal du clic en ajoutant quelque chose comme ceci:

$("#linkButtonId").click( function (event){
 event.preventDefault(); event.stopPropagation();
 // things that should happen in this function on click
});

plus d'informations sur preventDefault et stopPropagation peuvent être trouvées ici

Cela empêchera la soumission de votre formulaire ou, dans mon exemple, le clic sur un lien.

0
user1961

Je rangeais un peu le JS dans un seul document prêt et je déplaçais l'emplacement où la fonction showHeader est définie avant celui où il est appelé.

Cependant, je pense que le principal problème est dû au fait qu’au sein de captcha div, vous avez un script de Google qui charge le contenu Captcha. J'ai déjà vu quelque chose de similaire avec Colorbox et ajouté dynamiquement du contenu (dans ce cas, il s'agissait de vidéos).

La solution consiste à séparer le contenu de #recaptcha div dans un fichier séparé et à laisser Colorbox l'injecter dans le DOM onclick.

$("a.captcha").colorbox({
    width: "30%",
    href: "recaptcha.html" //or .php or whatever
});

Edit: J'ai édité le JSFiddle fourni par Metalshark (+1 pour jsfiddle - une ressource superbe) pour montrer que votre jQuery fonctionne correctement: http: //jsfiddle.net/tfcuA/13/ > Cette révision remplace simplement le recaptcha par du contenu de test qui n'est pas chargé dynamiquement ailleurs et cela fonctionne, suggérant que la solution de séparation doit également fonctionner.

0
bcmcfc