Is there a way to trigger the document.addEventListener 'turbolinks:load' function when transitioning from a link_to helper using React Webpacker in Rails 5?

Question

Is there a way to trigger the document.addEventListener 'turbolinks:load' function when transitioning from a link_to helper using React Webpacker in Rails 5?

I am currently working on a project using React with Webpacker on Rails 5. When I navigate to the page using the link_to helper, it seems like the JavaScript under

document.addEventListener('turbolinks:load')

is not functioning properly.

The main controller for this project is called insurance_form_container.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import StartForm from './insurance_form/start_form'

console.log('root react')

document.addEventListener('turbolinks:load',function () {
  ReactDOM.render(
    <StartForm />,
    document.getElementById('start-form-index-container')
  )
})

This is the HTML template for the specified route

<div class="container">
  <div id="start-form-index-container">

  </div>
</div>

<%= content_for(:footer) do %>
    <%= javascript_pack_tag('insurance_form_container') %>
<% end %>

This is the link from another page.

<%= link_to users_insurance_form_start_path,
            class: 'btn btn-lg btn-success btn-primary-green' do %>
    Proceed
<% end %>

It appears that console.log('root react') is executing correctly, but ReactDOM.render is not running at all unless the page is refreshed. Am I overlooking something? How can I ensure that the `.jsx` code runs smoothly through the `link_to` helper?

Thank you!

javascript ruby-on-rails turbolinks webpacker

Answer 1

Answer №1

It seems like the code is following your instructions correctly. The Event Listener is added after the turbolinks:load event, meaning it will only run when you navigate to a new page and trigger the first turbolinks:load event after adding the listener.

If you want the code to execute on page load rather than waiting for another navigation event, consider using an event trigger like document.on("turbolinks:load").

document.on("turbolinks:load", function() {
  ReactDOM.render(
   <StartForm />,
   document.getElementById('start-form-index-container')
  )
});

Answer 2

It seems like the code is following your instructions correctly. The Event Listener is added after the turbolinks:load event, meaning it will only run when you navigate to a new page and trigger the first turbolinks:load event after adding the listener.

If you want the code to execute on page load rather than waiting for another navigation event, consider using an event trigger like document.on("turbolinks:load").

document.on("turbolinks:load", function() {
  ReactDOM.render(
   <StartForm />,
   document.getElementById('start-form-index-container')
  )
});

Answer 3

Answer №2

Hi, I also experienced this issue in the past.

In my case, I had bundled my react code in the header section along with other stimulus code. However, this approach was too early for adding document event listeners.

After separating the react code from the main bundle and loading it into the footer of the website, I was able to successfully implement the following solution:

import * as React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App"

const initializeReactPage = () => {
    const element = document.getElementById('js-robot-ui')
    if(element) {
        const root = ReactDOM.createRoot(element)
        const config = JSON.parse(element.dataset.config)
        root.render(<App config={config}/>)
    }
}

document.addEventListener("turbolinks:load", initializeReactPage)
initializeReactPage()

Answer 4

Hi, I also experienced this issue in the past.

In my case, I had bundled my react code in the header section along with other stimulus code. However, this approach was too early for adding document event listeners.

After separating the react code from the main bundle and loading it into the footer of the website, I was able to successfully implement the following solution:

import * as React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App"

const initializeReactPage = () => {
    const element = document.getElementById('js-robot-ui')
    if(element) {
        const root = ReactDOM.createRoot(element)
        const config = JSON.parse(element.dataset.config)
        root.render(<App config={config}/>)
    }
}

document.addEventListener("turbolinks:load", initializeReactPage)
initializeReactPage()

Is there a way to trigger the document.addEventListener 'turbolinks:load' function when transitioning from a link_to helper using React Webpacker in Rails 5?

Answer №1

Answer №2

Similar questions

"Could you please include some additional information in the provided prompt

Observing ng-model within various nested ng-repeat loops

Having trouble adding elements (after the initial iteration) using the push() method in JavaScript

In the realm of React Native, an error arises when attempting to access 'this._nativeModule.isBluetoothEnabled', as the reference to null prevents it from

Dealing with Challenges in Constructing JQuery URLs

How can jQuery be used to transmit boolean field data from a template to Django views?

Comparing Inline SVG to CSS Background Sprite

Which characters should be encoded in an onclick event containing a string?

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom

Having trouble interacting with the "Continue" button on PayPal while using Selenium

Using a Javascript method to access a sibling property within an object

A regular expression in JavaScript for matching unpredictable numbers without any specific words preceding them

Having trouble with the Semantic UI popup not showing div content correctly? Need to display table row data as well? Let's troub

Loading an image into a Three.js scene

What could be causing setInterval to only run once?

Encountered a snag while executing Powershell with Selenium: Error message - unable to interact with

Is JavaScript necessary for this task in PHP?

Programmatically trigger a click event on a specific list item

Error occurs while making a request to the Google API using $.ajax

Rotating a non-centered triangle geometry in ThreeJS