it-swarm-eu.dev

Nefunkční jQuery / CSS ve Firefoxu - ColorBox a reCAPTCHA

Pracuji na tom, co by vypadalo jako základní kontaktní formulář. Používám plugin ColorBox pro jQuery k vytvoření formuláře s odkazem na obrázek, který poté otevře ColorBox obsahující formulář reCAPTCHA a tlačítko pro odeslání formuláře.

Tento kód funguje dokonale v IE7 nahoru a dokonce funguje do určité míry v IE6, přesto ve Firefoxu, Opera a Chrome, když kliknu na tlačítko Odeslat, zdá se, že odebere celou stránku jako kdyby procházel skutečným odkazem.

Jsem si jistý, že tady někde dělám opravdu hloupou chybu, takže se někdo mohl rychle podívat na můj kód a zjistit, kde se pokazím? Tento problém mě už nějakou dobu obtěžuje a zastavuje můj postup mnoha dalšími věcmi.

ÚPRAVA: Hloupá mě! Právě jsem si uvědomil, že jsem ani nezahrnul URL! Tady je zkrácená ta, kterou jsem procházel kolem IRC ...

http://is.Gd/f3M2s

ÚPRAVA 2: Když je otevřen ColorBox, je zobrazen následující kód podle 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>
2
Mike B

Ukazuje se, že se jedná o relativně běžný problém pro ty, kteří používají plugin PHP pro reCAPTCHA. Rozhodl jsem se použít plugin pro část na straně serveru, ale ručně vytvořím reCAPTCHA formulář s daným JavaScriptem a nyní to funguje naprosto v pořádku.

0
Mike B

Změna tlačítka Odeslat z tlačítka Odeslat na typ zabrání odeslání formuláře.

http://jsfiddle.net/tfcuA/

Pokud kliknete na tlačítko Odeslat, budete muset "zaseknout" výchozí chování odesílání vrácením nepravdivého nebo pomocí jQuery's preventDefault.

V opačném případě máte spouštěcí kód Captcha spouštěcí z onsubmit ve formuláři.

2
Metalshark

Normální událost kliknutí můžete zastavit přidáním něco podobného:

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

více informací o preventive Defef a stopPropagation najdete zde

Tím se zabrání odeslání formuláře nebo v mém příkladu kliknutí na odkaz.

0
user1961

Já bych uklidil JS trochu do jednoho dokumentu připraven, a přesunout místo, kde je funkce showHeader definována před, kde je volána.

Myslím si však, že hlavní problém je způsoben skutečností, že uvnitř jednotky captcha máte skript od společnosti Google, který načítá obsah Captcha. V minulosti jsem s Colorboxem viděl něco podobného a dynamicky přidávaný obsah (v tom případě to byla videa).

Řešením je oddělit obsah #recaptcha div do samostatného souboru a nechat Colorbox vstoupit do DOM onclick.

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

Úpravy: Upravil jsem JSFiddle poskytované Metalshark (+1 pro jsfiddle - vynikající zdroj), abych ukázal, že vaše jQuery funguje dobře: http: //jsfiddle.net/tfcuA/13/ > Tato revize jednoduše nahradí recaptcha nějakým testovacím obsahem, který není dynamicky načten odjinud a funguje to, což naznačuje, že by řešení separace mělo také fungovat.

0
bcmcfc