On occasion it seems that jQuery and reCAPTCHA are not the best of friends. I encountered a problem on an Drupal 4.7 (with so many changes for performance it is almost a fork) installation using the reCAPTCHA 4.7.x-1.0 and CAPTCHA 4.7.x-1.2 modules. The user login/registration pages use reCAPTCHA and some custom jQuery module for doing rounded corners (single image, liquid layout). This combination caused the page to white-screen as soon as the jQuery modified the DOM. The page would be briefly visible, reCAPTCHA and all, and then white-screen with an infinite browser load. Not good. Fortunately this bug never made it to production or test so I had two systems I could compare against to see what had gone so wrong.
The page used to work so I began the tedious debug cycle to find out what changed. I verified and corrected some HTML issues in the templates. I used tidy -i -wrap 512 (available as a package on my CentOS 4 and 5 systems) to help track down the missing tags. But alas that was not the issue, although cleaning up the template was a good thing.
Eventually I tracked it down to a stored template in the database. The production and test systems had a typo in the template preventing the jQuery from triggering. Eventually I noticed the lack of rounded corners for the specific login box and that lead me to the culprit. Fixing the typo on the test system caused the exact same problem I was seeing on development. Finally, progress. Now I knew it was not some code or theme issue change, and I had another item to add to QAs testing list (verify rounded corners on login).
My elation did not last long, there was no solution to this problem to be found on line. A few issues others had encountered problems, including the ReCaptcha developers, but no answers. I suspected it was an issue with ReCaptcha altering the DOM at the same time as my jQuery so:
- Use setTimer to delay reCaptcha script for 5 seconds : Rounded corners appear, 5 seconds pass, reCAPTCHA fires, white-screen – FAILS
- use setTimer to delay image-corners script for 5 seconds : reCAPTCHA appears, 5 seconds pass, jQuery fires, white-screen – FAILS
- So much for altering the DOM at the same time, that was not apparently the problem.
- Debug code in jQuery code indicated that on first DOM change the page fails
- Move reCAPTCHA to OUTSIDE the rounded corners area – WORKS
Now I was getting closer. After some more trials and a bit of patching to the to the Drupal 4.7 modules I had a working solution. My guess is that the
SCRIPT tag within the DOM being modified was the culprit. The trick was to move the
SCRIPT reCAPTCHA elements out of the
DIV where image corners were being used. To do that I used the reCAPTCHA API examples. I used a small placeholder DIV for the reCAPTCHA, and placed the reCAPTCHA
SCRIPT and trigger code (wrapped on a jQuery
ready) in the footer ($closure) area via a _hook_footer_ function.
There are a few improvements and settings that could be added to make this a more distributable patch, but I lack the time right now to do those. Hopefully the patch will prove useful as an example solution even if you not using Drupal 4.7. I also added the clear style to the reCAPTCHA while I was editing.
I am not sure this problem exists in the Drupal 6 version of the module, eventually I will have to check that as well.
Attached is my patch to reCAPTCHA (the Drupal module and the PHP library code).