Request for Ajax with data-coloris

[mircobalda]

Hi,

I hope this email finds you well. Firstly, I wanted to extend my sincerest regards for the incredible work you've done with Coloris.js. It's an invaluable tool that has greatly enhanced the functionality and aesthetics of my projects.

However, I'm currently encountering an issue that I was hoping you could assist me with.
I'm using the data-coloris option. When I reload a specific part of my HTML using AJAX, the Coloris object still opens the picker but fails to create the structure necessary to display the colors properly. Here's an example of the structure that should be created, but it doenst:

...

Despite the object remaining visible, the color display is not functioning as expected after the AJAX reload.

I would greatly appreciate any guidance or assistance you could provide in resolving this issue.

Thank you once again for your outstanding contribution to the development community. Looking forward to your response.

Best regards

Mirco

[mdbassit]

The color fields within the new HTML you reload using AJAX need to be processed again by Coloris. Since you are using the default selector [data-coloris] , all you need to do is to run the following code after every AJAX update:

Coloris.wrap('[data-coloris]');

[mircobalda]

Perfect! It works! One question more, is it possbile to have in HEX the color here:
<div class="clr-field" style="color: rgb(247, 0, 0);">

[mdbassit]

There is no reliable way to do that.
What are you trying to achieve? I might be able to steer you towards a better alternative.

[mircobalda]

Dont worry, doesnt matter.
I'me developing a CMS and at the momnet I just accept HEX values, I made a function server side which transfor rgb to hex before to achieve it on db, thank you anyway!
And if you are in Bali maybe we will see soon there!

[mdbassit]

If you want to set the color format to HEX, you can do it by setting the format option to "hex" when you initialize Coloris.

[mircobalda]

It prints inside the field, Hex value but in HTML, the style of <div class="clr-field" is still in rgb.
I need to get the value from the HTML

[mdbassit]

The color value is automatically converted to rgb() by the browser no matter what color format is used to set it.
Why do you need to retrieve the value from the HTML instead of the input field?

[mircobalda]

The input value is not updated, its just updated the css value of that div

[mircobalda]

Maybe I'm wrong, let s see this page that is your sample, I didnt touch it.
https://www.mb-website.com/root/coloris-main/dist/examples.html

[mdbassit]

Yeah the input field is also updated with the correct color value in the correct format. You should retrieve the color value from the input field.

[mircobalda]

I didnt understand where is it.
Lets get the third example in HEX.
It starts with value input #cc458faa, I use your object and it changes to whatever, #ddd, where can I find this value in HTML?
I still see the first one
<input type="text" class="coloris instance2" value="#cc458faa">

[mdbassit]

You need to use Javascript to retrieve the value. For example in this case:

// Retreive the color value of the field with the CSS classes "coloris" and "instance2"
let colorValue = document.querySelector('.coloris.instance2').value;