Using Turnstile within a form loaded via AJAX

Hi there,

I am wanting to use Turnstile on a form that’s loaded in via AJAX but am having a slight issue.

On loading for the form, there is a div with my target class of js-cf-turnstile (e.g. <div class="js-cf-turnstile"></div>), and am using the explicit version of the widget to target this element https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb.

I have this function _turnstileCb:

window._turnstileCb = () => {
  console.log('Turnstile ready', window.turnstile)
  const cfTarget = this.buttonWrapper.querySelector('.js-cf-turnstile')
  window.turnstile.render(cfTarget, {
    sitekey: sitekey,
    callback: function(token) {
      console.log(`Challenge Success ${token}`);
    },
  })
}

This function in fact does work, I can see the console.log('Turnstile ready', window.turnstile) returning all the different functions available, and I can even see the Turnstile iFrame within my target div, however it stops there and a message appears in the iFrame saying “This check is taking longer than expected. Check your Internet connection and refresh the page if the issue persists.”.

Checking dev tools shows this error - Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase').

This is potentially the section of code erroring:

function Ut(e) {
        var r = function(t, o) {
            if (!t || t.tagName === "BODY")
                return o;
            for (var f = 1, s = t.previousElementSibling; s; )
                s.tagName === t.tagName && f++,
                s = s.previousElementSibling;
            var m = et(t.tagName.toLowerCase())
              , p = "".concat(m, "[").concat(f, "]");
            return r(t.parentNode, "/".concat(p).concat(o))
        };
        return r(e, "")
    }

Does anyone have any idea why it might be breaking at this point?

Hey guys, since I posted this, found out the issue. The element I was embedding wasn’t in the body, and so the function that was erroring was looking for it to be in the body tag :man_facepalming:

This should probably be mentioned in the docs somewhere however.

Jack