update element in knockout template which was changed by 3rd party library

Question

1. I have 'div' element (recaptchaDiv) in knockout template which is not bound to any observable field: <div id="recaptchaDiv"></div>

2. On the other hand, I update this 'div' by 3rd party library. In particular, this is google recaptcha. This is my code:

   Recaptcha.create("[my private key]", "recaptchaDiv", { theme: "clean", callback: Recaptcha.ToTest });

And it doesn't work (I see nothing).

What I know:

1. trying on FF console: $("#recaptchaDiv").html() - it shows the expected html code, I just can't see it in the browser

What I tried:

1. to move recaptchaDiv outside of the template and it works: I can see the captcha in the browser

2. to bind recaptchaDiv on html property:

   in the template:

   <div id="recaptchaDiv" data-bind="html: recaptcha"></div>

   in the model:

   Recaptcha.create("[my private key]", "recaptchaDiv", { theme: "clean", callback: Recaptcha.ToTest }); recaptcha($("#recaptchaDiv").html());

and it doesn't work

(replacing jquery on document.getElementById doesn't help)

Any help will be very much appreciated!

Thank you in advance.

Answer 1

Have you ensured your observable is first working properly? Try a test string like recaptcha("foo") to ensure it renders.

Next, is it possible recaptcha is asynchronous? In that case you'd have to set the observable value in recaptcha's callback (which should be fine).

EDIT: according to the docs, the callback is fired when once the recaptcha area is created, thus you would have to get the HTML of it in that callback. Try this:

Recaptcha.create("[my private key]", "recaptchaDiv", { theme: "clean", callback: function() {
  //the callback
  recaptcha($("#recaptchaDiv").html());
  Recaptcha.ToTest();
} });