it-swarm.com.de

Unterbrochenes jQuery / CSS in Firefox - ColorBox und reCAPTCHA

Ich arbeite an einem scheinbar einfachen Kontaktformular. Ich verwende das ColorBox-Plugin für jQuery, um ein Formular mit einem Bildlink zu erstellen, das dann eine ColorBox mit dem reCAPTCHA-Formular und der Senden-Schaltfläche für das Formular öffnet.

Dieser Code funktioniert in IE7 und höher einwandfrei, in IE6 funktioniert er sogar bis zu einem gewissen Grad. Wenn ich jedoch in Firefox, Opera und Chrome auf die Schaltfläche zum Senden klicke, wird die gesamte Seite scheinbar so entfernt, als würde sie angezeigt durch einen tatsächlichen Link.

Ich bin mir sicher, dass ich hier irgendwo einen wirklich dummen Fehler mache. Könnte jemand einen kurzen Blick auf meinen Code werfen und sehen, wo ich falsch liege? Dieses Problem nervt mich schon eine Weile und bremst meinen Fortschritt bei vielen anderen Dingen.

EDIT: Blöd mich! Mir ist nur aufgefallen, dass ich nicht einmal die URL angegeben habe! Hier ist der verkürzte, den ich im IRC herumgereicht habe ...

http://is.Gd/f3M2s

EDIT 2: Beim Öffnen der ColorBox wird laut View Source der folgende Code "angezeigt".

<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>
2
Mike B

Es stellt sich heraus, dass dies ein relativ häufiges Problem für Benutzer ist, die das PHP -Plugin für reCAPTCHA verwenden. Ich habe beschlossen, den Plugin-Code für den serverseitigen Teil zu verwenden, aber das reCAPTCHA-Formular manuell mit dem angegebenen JavaScript zu erstellen, und jetzt funktioniert es einwandfrei.

0
Mike B

Wenn Sie die Schaltfläche "Senden" von "Senden" in "Typ" ändern, kann das Formular nicht gesendet werden.

http://jsfiddle.net/tfcuA/

Wenn Sie auf eine Senden-Schaltfläche klicken, müssen Sie das Standard-Übermittlungsverhalten "stören", indem Sie false zurückgeben oder "preventDefault" von jQuery verwenden.

Andernfalls müssen Sie den Captcha-Bearbeitungscode von onsubmit auf dem Formular auslösen.

2
Metalshark

Sie können das normale Ereignis des Klicks stoppen, indem Sie Folgendes hinzufügen:

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

weitere Informationen zu preventDefault und stopPropagation finden Sie hier

Dies verhindert das Absenden Ihres Formulars oder in meinem Beispiel das Klicken auf einen Link.

0
user1961

Ich würde den JS ein bisschen in einem einzelnen Dokument aufräumen und die Stelle, an der die Funktion showHeader definiert ist, dorthin verschieben, wo sie aufgerufen wird.

Ich denke jedoch, dass das Hauptproblem durch die Tatsache verursacht wird, dass Sie innerhalb des Captcha-Bereichs ein Skript von Google haben, das den Captcha-Inhalt lädt. Ich habe in der Vergangenheit etwas Ähnliches mit Colorbox und dynamisch hinzugefügten Inhalten gesehen (in diesem Fall waren es Videos).

Die Lösung besteht darin, den Inhalt des Divs #recaptcha in eine separate Datei zu trennen und Colorbox ihn per Mausklick in das DOM einfügen zu lassen.

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

Bearbeiten: Ich habe die von Metalshark bereitgestellte JSFiddle (+1 für jsfiddle - hervorragende Ressource) bearbeitet, um zu zeigen, dass Ihre jQuery einwandfrei funktioniert: http: //jsfiddle.net/tfcuA/13/ > Diese Überarbeitung ersetzt einfach das Recaptcha durch einen Testinhalt, der nicht dynamisch von einem anderen Ort geladen wird, und funktioniert, was darauf hindeutet, dass die Separationslösung auch funktionieren sollte.

0
bcmcfc