jquery-colorpickersliders onChange event firing on page load

Question

I'm using the plugin Bootstrap Color Picker Sliders. The documentation for the plugin is here: http://www.virtuosoft.eu/code/jquery-colorpickersliders/.

For some reason, the onchange event provided with the plugin appears to be firing on the load of the page. I can't figure out why. Is this my doing or is this an issue with the plugin itself?

Example

Here's a fiddle of what I mean: http://jsfiddle.net/bV7qF/

<div class="hsl"></div>

$(".hsl").ColorPickerSliders({
    flat: true,
    previewformat: 'hsl',
    order: {
        hsl: 1,
        preview: 2
    },
    onchange: function() {
        alert("test");
    }
});

score 2 · Answer 1 · answered Mar 13 '14 at 23:12

I think it's something within the plugin, I see functions like:

function _addCurrentColorToSwatches() {
    swatches.unshift(color.tiny.toRgbString());
    _storeSwatches();

    $(document).trigger("colorpickersliders.changeswatches");
}

And it also has a function _resetSwatches(). So it can be an issue or something intended by the author of the plugin.

For example: the default color is set, the onchange is fired and a div background will be changed to this color.

tenthfloor · Accepted Answer · 2014-03-15T20:58:31.167

Yup, looks like the plugin calls the onchange handler when you initialize it (via your code above). Check out the source. Here is a link to it: http://www.virtuosoft.eu/code/jquery-colorpickersliders/jquery-colorpickersliders/v4.1.7/jquery.colorpickersliders.js

This function: _updateAllElements(); calls settings.onchange(container, color); _updateAllElements(); itself is called when the plugin loads (via your code above), inside its init(); method...

Check out the source by searching "onChange" and follow the trail of function calls!

Julha · Answer 3 · 2015-11-25T13:28:37.697

I think the solution is here.

The _updateAllElements() function is triggering the onchange event

function _updateAllElements(disableinputupdate) {
    ...

    settings.onchange(container, color);

    ...
  }

The _buildComponent() function is trigger at the init of the color-sliders.

     function _buildComponent() {
        _initElements();
        _renderSwatches();
        _updateAllElements();//comment or delete this line
        _bindControllerEvents();
      }

After you have a bunch of "activateGroup" function, for all the color-sliders mods. In the test I'm using the Swatches mod, so i modified the activateGroupSwatches() function

  function activateGroupSwatches() {

    ...

    _updateAllElements(true);//comment or delete this line

    ...
  }

I've just made only few test with this config, but it seems to work. The function onchange is not triggered at the load of the page, and the function works after.

$("#color").ColorPickerSliders({
            flat: true,
            color: '#fff',
            swatches: tab,
            customswatches: false,
            order: {},
            onchange: function(container, color){
                    function_you_want();
            }
        });

jquery-colorpickersliders onChange event firing on page load

3 Answers3