wpColorPicker - problem with implementation to post meta

Question

I need your help as I am stuck and Google does not return anything, so I must be doing something obiusly wrong here, I just don't know what.

Basically, I need color input in one of my custom post types meta and I am trying to use a new WordPress 3.5 colorpicker for that. I could simply find another script and use it, but if it's already bundled with WP, that's what I should use.

So anyway, this is what I have done:

I have this input field in custom metabox:

<input name="mv_cr_section_color" type="text" id="mv_cr_section_color" value="<?php echo $sections_color; ?>" data-default-color="#ffffff">

I have this piece for enqueueing the script needed:

wp_enqueue_script( 'wp-color-picker' );

and finally I have this custom js:

jQuery('#mv_cr_section_color').wpColorPicker();

wrapped in .ready()

Result is this: Input field gets hidden (it gets display: none inline urle applied to it), if I uncheck that (using Google Chrome), when I click the field nothing happens (:focus should trigger colorpicker). If I then unhide colorpicker (it is spawned, I see it in source) I can use it and it functions normally, default color also works well but I just can't find the reason why field gets hidden and why it does not open colorpicker on focus.

Anyone have any idea, I am really ... about this :)

Thanks

EDIT: Just the note, no error in console.

Answer 1

I tried the following and it works:

function wpse_80236_Colorpicker(){ 
    // you forgot this probably it's the bundled CSS
    wp_enqueue_style( 'wp-color-picker');
    //
    wp_enqueue_script( 'wp-color-picker');
}

add_action('admin_enqueue_scripts', 'wpse_80236_Colorpicker');

Then your input:

<input name="mv_cr_section_color" type="text" id="mv_cr_section_color" value="#ffffff" data-default-color="#ffffff">

Then the following js:

jQuery(document).ready(function($){
    $('#mv_cr_section_color').wpColorPicker();
});