How to refresh color after about coloris HOT 13 CLOSED

Oh I think I finally understand, I didn't notice earlier that the picked color and the color of the button were different. This is not supposed to happen, it looks like a bug. Is there anyway I can take a look at your page and do a couple tests?

from coloris.

I just took a look at the code for jQuery.trigger() and it seems it only works for event listeners created with jQuery. So what you need is to trigger an "input" event with vanilla JavaScript. Try this code right after you change the color value:

document.querySelector("input[name=edit_date_type_couleur]").dispatchEvent(new Event('input', { bubbles: true }));

I hope this time it works.

from coloris.

I'm not sure what you are asking exactly, but if you want to change the label of the small button next to your input field:

You can do it like this:

Coloris({
  a11y: {
    open: 'Open color picker' // Your label here
  }
});

Please note that the label is mostly used to make color picker accessible to people who use screen readers.

from coloris.

I have an html block with a colorpicker field.
I have several buttons that allow me to change the color of the field. The only concern for now is that the label is not refreshing (the color). On the other hand, when you click on the colorpicker, I can see the correct color.
So basically, i need a refreshColor function. (Sorry for my bad english)

from coloris.

Thanks but, To tell the truth, it's in the backend of a wordpress module developed to measure for the company I work for. I unfortunately cannot give you access, but I can give you all the information you want and how I use your plugin.

So I have a hidden HTML block. When I press the edit buttons, it brings up the html block and changes the color of the colorpicker.
When you click on the button for the first time, the color is updated, even in the label. But after the first click and therefore initialization, the label is no longer updated.
For the moment, I refresh the colorpicker field by initializing the class. Is there another way like a Coloris.updateColor ("# ff0000");

from coloris.

I'm not sure since I can't test it, but I think you probably remove the input field from the DOM tree which removes the event listener that I use to update the "label" when the color changes. In that case, you can call Coloris.wrap(selector) after showing the input field.

If you don't use a custom selector when initializing the color picker this should work:

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

If you are using a custom selector:

Coloris.wrap(yourSelector);

from coloris.

@arnaudboi Was your problem resolved? Let me know so I can close this issue.

from coloris.

Hello, unfortunately, it doesn't change anything.

As you can see, each time a button is clicked, I initialize Coloris and then add wrap.
Unfortunately, this only works on the first Click. Then the label only does not update.
Should I proceed otherwise?

from coloris.

I see! You update the value of the color field programmatically with jQuery. In that case, all you need to do is to trigger an "input" event on the field:

jQuery("input[name=edit_date_type_couleur]").trigger("input");

You don't need to call Coloris.wrap() anymore.

from coloris.

I tried with your code, unfortunately it still doesn't work :(

from coloris.

You need to add that code right after you change the value of the color. So your code should look like this:

...
 
jQuery("input[name=edit_date_type_couleur]").val(date_type_couleur);
jQuery("input[name=edit_date_type_couleur]").trigger("input");

...

from coloris.

Perfect, it works. Thank you for the time you gave me and the great plugin you created! Good continuation

from coloris.

Glad I could help!

from coloris.