Reinitiate the Colorpicker after inserting html with ajax

[SoulFliktioN]

First of all, thanks for this pretty and easy to use script!

I had problems reinitiating the colorpicker after adding some new fields with ajax. So i don't know if there is any better and more correct way but here is my solution:

1. Creating a custom event
   const colorisreinitiate = new Event("COLORISReinitiate");

2. I changed the DOMReady function to:

  function DOMReady(fn, args) {
    args = args !== undefined ? args : [];

    if (document.readyState !== 'loading') {
      fn(...args);
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        fn(...args);
      });
      // added part begin
      document.addEventListener('COLORISReinitiate', () => {
        bindFields(settings.el);
        wrapFields(settings.el);
      });
      // added part end
    }
  }

3. Fireing the event in my ajax call

$.ajax({
 // ajax options
}}).done(function( data ) {
 document.dispatchEvent(colorisreinitiate);
});

[mdbassit]

You don't need to do any of that, all you need is to call Coloris() again with the same options after your ajax call is done.

$.ajax({
 // ajax options
}}).done(function( data ) {
 Coloris({ /** your options **/ });
});

[mdbassit]

If you don't want to use a custom selector, just use the default [data-coloris] one.

The main drawback to your code which adds a custom event is that you have to maintain a modified copy of the color picker.

[SoulFliktioN]

Thanks for your effort! And sorry I didn't came up with using the standard selector [data-coloris].

[mdbassit]

Always happy to help. I hope that solved your problem.

[SoulFliktioN]

Omg yes it just didn't cross my mind to wrap it with the standard selector. I am using this function now and in after my ajax calls simply initColoris(true).

function initColoris(wrap){
	Coloris({
		wrap:false,
		theme: 'pill',
		themeMode: 'dark',
		formatToggle: true,
		closeButton: true,
		clearButton: true,
		swatches: [
			'#067bc2',
			'#84bcda',
			'#80e377',
			'#ecc30b',
			'#f37748',
			'#d56062'
		]
	});

	if(wrap){
		Coloris.wrap("[data-coloris]");
	}
}

[mdbassit]

FYI, wrap: false is not effective on the default selector, so you can safely remove it.