Insert HTML and React JS by AJAX response

Question

I am trying to insert ajax response to body from page that has React JS.

The page has only div and script tag like below;

<div data-react-class="example" data-react-props="{}" data-react-cache-id="example-0" class="example"></div>
<script type="text/javascript" src="/packs/js/application.js"></script>

I tried document.body.append, document.write, document.body.innerHTML +=... or insert div and script separately but React Component not initialized. All methods I tried that inserting code but React JS not activated.

I tried setTimeout for script but nothing changed. Although when I open the page without ajax it works as I expected.

What am I missing?

How can I initialize React JS after insert to page with javascript.

Code Example: https://codesandbox.io/embed/awesome-roentgen-q9m0b

Works without ajax: https://q9m0b.csb.app/src/get-ajax-page.html

But does not initialize if I insert with ajax: https://q9m0b.csb.app/

Gagan · Accepted Answer · 2021-08-06 11:26:15Z

0

You will need to do document.body.innerHTML+=(<your ajax response>). I have added a mock version of what you are trying to achieve. The div is rendering fine using this code

https://codesandbox.io/s/react-playground-forked-h5g57?file=/index.js

answered Aug 6, 2021 at 11:26

Gagan

3181 silver badge8 bronze badges

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

3 Comments

zenon Over a year ago

I created an example for you. This is react page working: q9m0b.csb.app/src/get-ajax-page.html and this page is index.html inserting with ajax: q9m0b.csb.app can you fix this usage?

Gagan Over a year ago

First of all I would suggest you to add your approach to the original question as it is not clear from the question itself what you are trying to do. The second thing is that you can not just insert ES6 module file(react-components.js) directly to your html file. This files are actually compiled and converted to plain js when you build your React file. So your react-components.js must be in plain js to achieve the desired affect. So write your file in plain js and modify the approach

zenon Over a year ago

My own javascript file compiled with webpacker. This is not a problem. I don't know codesandbox.io how works. I tried to create an example similar to my problem.

Collectives™ on Stack Overflow

Insert HTML and React JS by AJAX response

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related