Question

I’m struggling with implementing this ColorPicker plugin:

http://www.eyecon.ro/colorpicker/

I have a form with multiple fields, and I’d like the color picker to pop-up when I select any field, and change the value based on the selection made.

Here is my code:

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        $(this).ColorPicker({
            onChange: function(hsb, hex, rgb) {
                $(this).attr('value', '#' + hex)
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
})

for some reason though, the $(this).attr… section is not recognizing that $(this) is the currently selected field.

Can someone help me understand what I’m doing wrong?

Thanks!

Answer 1

At that point, $(this) is the colorpicker, not the element that you applied the colorpicker to.

Try something like this:

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        var elem = $(this);
        elem.ColorPicker({
            onChange: function(hsb, hex, rgb) {
                elem.attr('value', '#' + hex)
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
})

EDIT: As Pointy pointed out, there are a couple things you could do to make this a bit better:

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        var elem = $(this);
        elem.ColorPicker({
            onChange: function(hsb, hex, rgb) {
                elem.val('#' + hex)
            }
        });
    }
    $('form.niceform input').on('mouseup', changeColor);
})