django : recaptcha : Error in firefox works in IE & chrome : RecaptchaState error

Question

I have integrated Recaptcha with dJango. dJango Snippet - Recaptcha

The view which is showing the page is - from baseapp.recaptcha import captcha

def showHome(request):    
    if(request.user.is_authenticated()):    
        tempEmail = request.session.get('id')    
        return render_to_response('logreg/login-register.html',   {'emailFromForm':tempEmail}, context_instance=RequestContext(request));    
    else:    
        request.session.set_test_cookie()    
        form = RegistrationForm()    
        loginForm = LoginForm()    
        html_captcha = captcha.displayhtml(settings.RECAPTCHA_PUB_KEY)    
        print "Captcha HTML is : %s" % html_captcha    
        return render_to_response('logreg/login-register.html', {'form': form, 'loginForm':loginForm, 'html_captcha':html_captcha})    `

Here is the code in html -

<div id="register-dialog" title="Register yourself">    
  <p id="validateTips">All form fields are required.</p>    
  {% if error %}    
  {{ error }}    
  {% endif %}    
  <form name="registrationForm" action="registerUser/" method="post">    
      {{ form.as_p }}    
      {{ html_captcha }}    
  </form>    
</div>

It works great in IE & Chrome, but firefox shows me an exception at line 451 in recaptcha. Here is the code at that line var $ST = RecaptchaState;

Any thoughts are appreciated !

Note : Firefox version - 3.6; IE - 8; Chrome - 4.0

Answer 1

Here is how I solved it.

I figured that my captcha is being shown inside the jqueryui dialog and maybe that is the problem with FF. (Why ? I don't know.) Hence instead of statically putting the text there from django or writing it out. I used the ajax api and inserted the recaptcha on the open event on the dialog.

Here is the sample code, just in case someone stumbles upon the same issue.

Code is almost similar to what is on the reCaptcha api site

$("#register-dialog").dialog({    
    buttons:{
    },    
    open: function() {
    Recaptcha.create("41x39....",
        "recaptcha_div", {
        theme: "red",
        callback: Recaptcha.focus_response_field
        });

And changed the form tag to be so -

<form name="registrationForm" action="registerUser/" method="post">    
    {{ form.as_p }}    
    <div id="recaptcha_div"></div>    
</form>

And yes, included the ajax.js -

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