Look like when turbo render a page, Coloris raise an error <div class="snippet-cli

Here it is: click on the "coloris page >" link on: <a href="https://cv-designer

I tried to put the CDN at the bottom of the body (was in the head), and Color p

Turbo load raise error // Cannot set properties of null (setting 'innerHTML') about coloris HOT 5 CLOSED

mdbassit commented on June 6, 2024

Turbo load raise error // Cannot set properties of null (setting 'innerHTML')

from coloris.

Comments (5)

mdbassit commented on June 6, 2024

Can you please share a link to your page so I can take a look?

from coloris.

jjf21 commented on June 6, 2024

Here it is:
click on the "coloris page >" link on: https://cv-designerr.herokuapp.com/coloris_test

You'll have a coloris form with the error, reload manually, and Coloris will be correctly set.

It's a rails app, and pages are loaded with Turbo (https://github.com/hotwired/turbo-rails). Probably a problem with how Turbo render the page and how Coloris init the inputs.

Thanks for your help!

from coloris.

jjf21 commented on June 6, 2024

I tried to put the CDN script at the bottom of the body (was in the head), and Color picker is initialize, but the error still pop in console.

from coloris.

mdbassit commented on June 6, 2024

Turbo seems to operate by replacing the content of <body> every time the page is re-rendered (when clicking on a link for instance), which destroys the hidden color picker <div> at the bottom of the page. I don't see any simple solution for this. Maybe check if there is a way to tell Turbo to preserve some of the content of the page on re-render.

from coloris.

jjf21 commented on June 6, 2024

Solved this using the npm package "https://github.com/melloware/coloris-npm"
I was unable to use it at first (melloware/coloris-npm#59) but now it's working perfectly.
Thanks for your help

from coloris.

Recommend Projects