problem with JQuery UI and Recaptcha

[invinzee]

Hi,

i am trying to integrate Recaptcha onto my site which is using JQuery.
I tried to embed it inside a modal dialog box created using the JQuery
UI Plugin but it does not work.

With JQuery alone, it seems to work perfectly fine as seen here.
http://beta.phokki.com/user/new

but once i start using their UI plugin and put it into the dynamic div
(the one used for dialog box), it failed on FF and Opera. Safari is
fine.

JQuery UI Plugin
http://jqueryui.com/demos/dialog/#event-open

Anyone with the same encounter?
Thanks in advance.

[FireSolex]

Hi,

I have the same problem...

I want to use reCaptcha on a jQuery UI dialog. When the js script
loaded, i'm redirected to a blank page...

Thanks for your help.


FireSolex.

[ImAzIr]

Hi there,

Same problem here.

It seems that when using a <script></script> inside a UI dialog or
effect, it does not work properly.

Any ideas ?

[Edgar]

Hi there,

I found a solution for the problem. Just add this small snippet to
your form:

<div id="recaptcha_div"></div>'
<script type='text/javascript'>
Recaptcha.create("yourkey",
"recaptcha_div", {
theme: "red",
callback: Recaptcha.focus_response_field
});
</script>

And add this to the header:

<script type="text/javascript"
src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>

I dont understand what caused the problem, but it had something to do
with that dialog() reloads the recaptcha script. This solution is
jquery safe.

You can verify the captcha by verifying recaptcha_challenge_field and
recaptcha_response_field with your favorite language.

Edgar

[Paul R.]

Hi Edgar,

I just wanted to say thanks. This fix solved my problem (reCAPTCHA JS
Error in Safari) as well.

[Edgar]

He Paul,

Most of the times the solution of my problem is already on the
Internet, so
I am glad I could help someone.

I found out what's going wrong:

-- code where the dialog gets created --

uiDialogContent = this.element
.show()
.removeAttr('title')
.addClass(
'ui-dialog-content ' +
'ui-widget-content')
.appendTo(uiDialog),

appendTo uses the appendChild method provided by the browser:

append: function() {
return this.domManip(arguments, true, function(elem){
if (this.nodeType == 1)
this.appendChild( elem );
});
},

I found out if the code contains document.write it will (in FF)
redirect
the browser to a blank page. Example:

var b = document.createElement('script'); b.setAttribute('type',
'text/javascript'); b.setAttribute('id', 'test'); b.innerHTML
='document.write("hello")'; document.body.appendChild(b);

This seems to be a bug. Suspected behaviour would be that is writes
hello
after the script tag. But I am not sure about this.

With kind regards,

Edgar

[diogobaeder]

I'm new here, but I'd like to discuss about this issue because I'm
having the same problem.

As you can see here:
http://groups.google.com/group/jquery-dev/browse_thread/thread/0acd282f4751a090
the problem really is with trying to move/copy DOM content with
"document.write" calls, because, as the script is reloaded after the
dialog constructions over the document, when it is already closed, the
browser has to reopen the document (via "document.open()") to rewrite
content, thus wiping out all the page content.

The solution would be that stated by Edgar above, or implement a way
to make reCaptcha work over an identified element - if this
implementation doesn't exist yet, of course, sorry if I miss something
here -.

Maybe a recaptcha jQuery binding?

Diogo

[edgar klerks]

Ah, I understand, why it goes wrong. Thought it was a bug in the browser.

 

I think it would be reasonable easy to extend jQuery with a method, which doesn't use document.write but makes an new (script) element and adds it to the dom. (with document.createElement)

You can check the script element already exists in the dom, so it won't be added twice.

I am on holiday now, but I will give it a try when I am at home again.

Greets,

 

Edgar

[edgar klerks]

Dumb Idea, I can wrap my solution into an jQuery extension. Much less work.

--
Flatliner ICT Service,
Email: Edgar....@gmail.com,
Tel: +31727851429
Fax: +31848363080
Skype: edgar.klerks
Website: flatlinerict.nl
Adres: Koelmalaan 258,
1813JD, Alkmaar
Nederland

[diogobaeder]

Hmm, I don't think that moving content filtering the script elements
would be a good alternative, because of the processing costs... but
maybe removing all the script elements before calling the dialog
constructors would do the job, something near to what you proposed,
Edgar... I'll try it, too...

I think that the root of the problem, here, is the original API, that,
in my opinion, should implement different strategies of putting the
content in the document, because "document.write" is considered bad
practice if it can be avoided, together with the use of the "eval"
function. Aditionally, I think it would be nice if the reCaptcha
project opened the API source, so that we could write API bindings for
the various JS frameworks that we have (jQuery, Prototype, dojo,
MooTools etc). Open Source has proven to be a great regimen for small
or medium-sized projects to grow.

Nevertheless, the Ajax API use is working fine, for me, even though it
was not originally designed for non-Ajax use.

Regards,

Diogo

On Jul 31, 11:22 am, edgar klerks <edgar.kle...@gmail.com> wrote:
> Dumb Idea, I can wrap my solution into an jQuery extension. Much less work.
>

> On Fri, Jul 31, 2009 at 4:18 PM, edgar klerks <edgar.kle...@gmail.com>wrote:
>
>
>
> > Ah, I understand, why it goes wrong. Thought it was a bug in the browser.
>
> > I think it would be reasonable easy to extend jQuery with a method, which
> > doesn't use document.write but makes an new (script) element and adds it to
> > the dom. (with document.createElement)
>
> > You can check the script element already exists in the dom, so it won't be
> > added twice.
> > I am on holiday now, but I will give it a try when I am at home again.
>
> > Greets,
>
> > Edgar

> >   On Thu, Jul 30, 2009 at 7:42 AM, diogobaeder <diogobae...@gmail.com>wrote:
>
> >> I'm new here, but I'd like to discuss about this issue because I'm
> >> having the same problem.
>
> >> As you can see here:
>

> >>http://groups.google.com/group/jquery-dev/browse_thread/thread/0acd28...

> Email: Edgar.kle...@gmail.com,

[diogobaeder]

Great news: removing the script before calling the dialog method
works! I was thinking if it would mess with the captcha events, but
they were intact... I don't know if this works on browsers other than
FF, but it's fine for me.

Also, for me it's a greater solution than using the Ajax API, because
it is friendly to the reCAPTCHA gracefull degradation; If the user
disables JavaScript, my page still works.

Diogo