Recaptcha in Ajax Content RSS

• • Reply
  

  victoryismin...

  0 Points

  5 Posts

  Recaptcha in Ajax Content

  Mar 30, 2012 02:15 AM|LINK

  Not sure if it would be considered a bug, but I thought I would mention that the

  @ReCaptcha.GetHtml()

   helper method doesn't work in content loaded via ajax.

  To get around this:

  Simply do not use the Razor @Recaptcha helper. Instead embed the code below in the content you are loading via ajax.

  <div id="myCaptcha"></div>
          <script type="text/javascript">
              Recaptcha.destroy();
              Recaptcha.create("Pub_key", "myCaptcha", {
                  theme: "clean"
              });
  </script>

  This way the script gets ran when the ajax content is loaded and everything should work. The rest of the implementation in the layout (Recaptcha api javascript reference), controller (check validation), etc remains the same.

  
  Thought I would mention it and see if ajax could some how be taken care of as well.

  • Edited by victoryismine06 on Mar 30, 2012 02:45 AM
  • Edited by victoryismine06 on Mar 31, 2012 03:08 AM
  • Edited by victoryismine06 on Mar 31, 2012 03:09 AM
  • Edited by victoryismine06 on Mar 31, 2012 03:18 AM
  • Edited by victoryismine06 on Mar 31, 2012 03:19 AM
• • Reply
  

  diotyd

  Member

  14 Points

  7 Posts

  Re: Recaptcha in Ajax Content

  Mar 31, 2012 02:33 AM|LINK

  Can you elaborate more on your work around?  I just bumped into this a few hours ago and I'm not sure I follow all of your work around.

  recaptcha

• • Reply
  

  victoryismin...

  0 Points

  5 Posts

  Re: Recaptcha in Ajax Content

  Mar 31, 2012 03:20 AM|LINK

  I updated the work around a little, if you still have questions let me know which part you need help with and I'll do my best to explain it.

  recaptcha

• • Reply
  

  diotyd

  Member

  14 Points

  7 Posts

  Re: Recaptcha in Ajax Content

  Mar 31, 2012 08:52 PM|LINK

  Thanks for the update.  The work around didn't function for me originally because I was also loading the recaptch js inside the jquery dialog box.  Which created a race condition between loading the js source and executing it.  I fixed it with jquery getScript:

  <div id="captchadiv"></div>
          <script type="text/javascript">
              $.getScript("http://www.google.com/recaptcha/api/js/recaptcha_ajax.js", function () {
                  Recaptcha.create("6Lf8oc8SAAAAACgdybPC2Mx2eX0CUFDCBSwXCYQw", 'captchadiv', {
                      tabindex: 1,
                      theme: "red",
                      callback: Recaptcha.focus_response_field
                  });
              });

  In case that helps anyone else.

  Thanks for your reply Victoryismine.

  recaptcha

  • Marked as answer by Dino He - MSFT on Apr 06, 2012 01:56 AM