0

i tried to use iris color picker in my plugin admin area but when i implemented i'm getting this error-

TypeError: $(...).wpColorPicker is not a functionCode-

function sam()
{
wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');
}
add_action( 'admin_enqueue_scripts', 'sam' );


<!--HTML-->

<input type="text" value="#bada55" class="ir" />

<!--SCRIPT-->

 <script type="text/javascript">
        jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});
        </script>

Why am I getting this error any clue? where am I making wrong?

  • try it with admin_print_scripts instead of admin_enqueue_scripts – passatgt Aug 25 '13 at 11:05
  • Did you read the instructions – Chris_O Aug 25 '13 at 11:19
  • yes i read that instructions and used it but same error – rram Aug 25 '13 at 11:28
  • @passatgt Thanks i tried admin_print_scripts instead admin_enqueue_scripts but no effect. – rram Aug 25 '13 at 11:30
  • another possible solution it is due to your php version, I upgrade from php 5.4 to php5.6 the problem is gone. – Shiro Jun 30 '17 at 13:56
2

This is happening because you are calling wpColorPicker function before loading wp-color-picker script so to overcome this situation call wpColorPicker() function after loading wp-color-picker script by adding following script in js file in this example i have added it in wp-color-picker-script.js.

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

and then enqueue it using admin_enqueue_scripts action after enqueuing wp-color-picker script and add wp-color-picker as a dependency for it as shown in the following code.

add_action( 'admin_enqueue_scripts', 'wp_enqueue_color_picker' );
function wp_enqueue_color_picker( $hook_suffix ) {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker');
    wp_enqueue_script( 'wp-color-picker-script-handle', plugins_url('wp-color-picker-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
  • Thanks.but still am facing the same problem.i just want to know 3 things so that i'll be improving or i can debug myself.What is $hook_suffix and handler in wp_enqueue_script and dependency? – rram Aug 26 '13 at 19:46
0

Try with changing your code like this..hope it will work

function sam()
{

wp_enqueue_script('wp-color-picker', plugins_url('wp-color-picker-script.js', __FILE__ ), array( 'farbtastic' ), false, true );

}
add_action( 'admin_enqueue_scripts', 'sam' );

In your template

<div class="color-picker" style="position: relative;">
<input type="text" value="#bada55" class="ir" id="color" />
  <div style="position: absolute;" id="colorpicker"></div>
</div>

In your js file (wp-color-picker-script.js)

jQuery(document).ready(function($) {
$('#colorpicker').hide();

$('#colorpicker').farbtastic('#color');
if ( $("#color").val().length === 0 )
    {
    var input = $( "#color" );
     input.val( input.val() + "#ffffff" );
    }
$('#color').click(function() {
    $('#colorpicker').fadeIn();
});

$(document).mousedown(function() {
    $('#colorpicker').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});
});
0

Another possible reason for this is a rogue filter on script_loader_tag, this was what was happening for me.

In this case, the script was enqueued properly, but this filter was removing the script tag completely, so it was not being loaded at all, then giving the wpColorPicker is not a function console error.

Just in case anyone has the same problem. ;-)

-2

Just call wp-color-picker script without creating a function:

wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('js/my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
-3

This error is showing because you have script_debug is set on . turn it off .

define('SCRIPT_DEBUG', false);

I know its not a good solution but i m unable to find the other way around. Looks like bug in wp core.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.