Vanderlee jQuery color picker and WordPress Errors

Has anyone gotten the Vanderlee jQuery color picker to work with WordPress? I’m evaluating color pickers with alpha support for my theme and this one just refuses to work. https://github.com/vanderlee/colorpicker

Originally I must have been loading the script too early because it was throwing this error:

Read More

TypeError: 'undefined' is not a function (evaluating '$('.my-color').colorpicker()')

I loaded the script in the footer and that error disappeared but now I’m getting this error:

TypeError: 'undefined' is not a function (evaluating '$('.ui-colorpicker-ok', part).button()')

The page loads fine by itself but the minute you click in a color field, that error appears and the HTML for the picker is loaded at the very end of the document.

This is on a WP 3.7.1 installation so it’s jQuery 1.10.2. I saw a similar problem listed in the issues list at https://github.com/vanderlee/colorpicker/pull/60 but that was fixed in the latest version 1.0.5.

My scripts are enqueued like this:

wp_enqueue_script( 'vancolor', CHILD_URL.'/lib/js/colorpicker/jquery.colorpicker.js', '', '', TRUE );
wp_enqueue_script( 'my-admin-script', CHILD_URL.'/lib/js/admin.js', array( 'media-upload','thickbox' ), '', TRUE );

And in my admin.js file, I’m initializing the color picker like this:

jQuery(document).ready(function($) {
  $('.my-color').colorpicker({
    alpha: true,
  });
});

My HTML is something like this:

<input type="text" class="my-color" />

This one has stumped me and there’s very little documentation in the wild so any help and insight here would be appreciated.

Related posts