How to run a javascript function after navigating to a react 'page'

Question

I need to run a simple java script function after my react form has finished loading. The JS is loaded from a 3rd party so i have no control over it and i need to run one of its functions in order to make a captcha section appear in my form. If i hit F5 then the area appears as expected but navigating to the page via the routes in the app does not trigger the load.

I have worked out that if i call this line of JS

window.__challenger.callPageRequest();

Then the captcha area appears, i know this works as i added a temporary button to the form which is being render and call the funtion on the button click. But I can't have some random button, i need to just fire this JS line everytime the form is navigated to.

I've tried using:

componentDidMount() {
    window.__challenger.callPageRequest();
}

But that complains with:

Cannot read property 'callPageRequest' of undefined

And i've tried adding:

window.__challenger.callPageRequest();

to the end of the form in the render method.

why is it so hard to do such a simple thing? any helped would be very much appreciated.

Which Captcha library are you using? My suspicion is that componentDidMount is being called before the JS for the Captcha library has finished being processed. — Matt Holland
– Matt Holland, Commented Mar 20, 2018 at 17:13
Unfortunately it an in house system developed by our colleagues in Japan, we have no way of getting it changed at all without mounds of red tape and weeks of delay. So effectively it’s like a 3rd party. — JPT
– JPT, Commented Mar 20, 2018 at 17:44

Trey Eckels · Accepted Answer · 2018-03-20 17:23:07Z

2

Are you sure componentDidMount is running after the route change? A route that is only different from other routes because of different params does not remount. You could try the componentWillReceiveProps() lifecycle method instead.

answered Mar 20, 2018 at 17:23

Trey Eckels

3483 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JPT Over a year ago

Yes, I made sure componentDidMount was firing, as you suggest will try the compontWillRecieveProps. Thanks

Chase DeAnda · Accepted Answer · 2018-03-20 18:11:17Z

1

The easiest (and possibly hackiest) is to poll window and check for the presence of the function before triggering it:

componentDidMount() {
    const poll = () => {
        if(window.__challenger && window.__challenger.callPageRequest) {
            window.__challenger.callPageRequest();
        }else {
            setTimeout(() => {
                poll();
            }, 250);
        }
    };
    poll();
}

If it exists on the first pass, go ahead and immediately call it. If it doesn't exist yet, wait 250ms and then try again.

answered Mar 20, 2018 at 18:11

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

2 Comments

JPT Over a year ago

This worked great for me. Not a huge fan of timers etc for this kinda thing but it’s got me out of a hole. Will carry on researching some of the other things people have proposed. Thanks.

Chase DeAnda Over a year ago

Glad you got it working, I feel the same way about polling (notice the hacky comment lol), but when all else fails, good ol' vanilla js is there to fallback on.

Lesbaa · Accepted Answer · 2018-03-20 17:51:21Z

1

Short of bringing redux and an additional component that dispatches actions on script loads. The best I can think of just now, if you're using a script tag with an external src to load the script you could try adding a handler onto the script tag and render it in you render method (although this is a bit messy). You might need to do some this binding in your constructor. Caveat, I haven't tried this.

see this answer: Script load in react

answered Mar 20, 2018 at 17:51

Lesbaa

2,3662 gold badges15 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to run a javascript function after navigating to a react 'page'

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related