Issue with code editor and Okta hosted widget

Questions
1

I am attempting to customize our Okta hosted sign-in widget and seem to be running into trouble when adding the afterRender method. Using this method, I am attempting to adjust the HTML within the widget - which seems to work, but then I get the following error message when trying to login:

image

My code is pretty straight-forward, but the login portion always works when I comment this out so something is clearly funky with it

oktaSignIn.on('afterRender', function (context) {
            console.log('context: ' + context);
            if(context.controller == 'primary-auth')
            {
                var formDiv = document.querySelector("[data-se='o-form-content']");
                formDiv.innerHTML += "<div id=\"tou-copy\">By signing into your J. J. Keller account, you agree to the <a target=\"_blank\" href=\"https://www.jjkeller.com/learn/terms-conditions\">Terms of Use</a>.  For information about how we use any personal information we collect for our own purposes, please review our <a target=\"_blank\" href=\"https://www.jjkeller.com/learn/notice-at-collection\">Notice at Collection</a>.</div>";

                var unlockLink = document.querySelector("[data-se='unlock']");
                var helpLink = document.querySelector("[data-se='help']");
                unlockLink.remove();
                helpLink.remove();
            }
        });
2

Does it log the context and gets inside the if condition? And are there console log errors?

3

Yes, it is logging the context and getting inside the IF - it is actually doing everything I ask it to within there, just seems to be causing the form to blow up. No errors in the console before or after it shows that error.

4

Doing a little bit more testing, it seems like it might be the “formDiv.innerHTML” line specifically - when I comment that one out, it seems to behave as expected.

5

Is the formDiv points to a valid DOM element? Also, does this code run after the DOM has loaded?

6

I do see my text changes from the innerHTML changes, so yes, “o-form-content” is valid - and my understanding of the afterRender method is that it fires after the DOM is loaded

7

I believe I got this working - instead of using “innerHTML”, I swapped that with “insertAdjacentHTML”. The text still appears and I am no longer seeing an error.

1 Like
8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.