Two FlexiColorPicker in the same page doesn't work - Firefox Only

[copegt]

I try to put two color picker in the same page, im using wijmo for dialogs and i show a dialog with the color picker inside but the first color picker works fine and the second doesnt work. This issue is only in for firefox because the same page i tested in IE9, IE10, IE11 and works fine. I dont know what to do. If somebody can help me i will appreciate.

Regard.

Peter.

[rabdill]

I ran into a similar problem, but on all browsers -- I found that referencing them like this helped a lot:

<div id="color-picker" class="cp-default"></div>
<div id="color-picker2" class="cp-default"></div>

And then at the bottom, where I put this part:

<script type="text/javascript">
ColorPicker(
document.getElementById('color-picker'),

function(hex, hsv, rgb) {
    console.log(hsv.h, hsv.s, hsv.v);         // [0-359], [0-1], [0-1]
    console.log(rgb.r, rgb.g, rgb.b);         // [0-255], [0-255], [0-255]
    document.getElementById('primary').value = hex;        // HEX
});
</script>

I just added another right below it:

<script type="text/javascript">
ColorPicker(
document.getElementById('color-picker2'),

function(hex, hsv, rgb) {
    console.log(hsv.h, hsv.s, hsv.v);         // [0-359], [0-1], [0-1]
    console.log(rgb.r, rgb.g, rgb.b);         // [0-255], [0-255], [0-255]
    document.getElementById('secondary').value = hex;        // #HEX
});
</script>

The two things that changed:

• document.getElementById('color-picker')
  • This one is just that it needs to be a different name from the other. Make sure it matches the div id from up top.
• document.getElementById('primary').value = hex;
  • Don't assign any special meaning to my use of "primary" and "secondary" here -- it's just what I called the two variables I wanted to change. You can call them anything you want.