TypeError: jQuery(…).hexColorPicker is not a function

Question

im trying to use color-picker jquery plugin. here is the screenshot of javascript file : here is it my code to initialize it :

<script type="text/javascript">
        jQuery(function(){
            jQuery("#color-picker1").hexColorPicker();
        });
    </script>

here is it the html element to trigger it :

<input type="text" id="color-picker1" class="form-control" />

but the plugin doesnt show. and it resulting a console log :

TypeError: jQuery(...).hexColorPicker is not a function

script placement :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
     <script src="<?php echo base_url()?>assets/color_picker/src/jquery-hex-colorpicker.min.js"></script> <!-- color picker plugin-->
     <link rel="stylesheet" href="<?php echo base_url()?>assets/color_picker/css/jquery-hex-colorpicker.css" /> <!-- color picker plugin-->

Answer 1

Make sure that the placement of your scripts as as followed, to make sure that you initialise the hex color picker after it is loaded, also missing ; in <?php echo base_url();?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="<?php echo base_url();?>assets/color_picker/src/jquery-hex-colorpicker.min.js"></script> <!-- color picker plugin-->
<link rel="stylesheet" href="<?php echo base_url();?>assets/color_picker/css/jquery-hex-colorpicker.css" /> <!-- color picker plugin-->

<script type="text/javascript">
    jQuery(function(){
        jQuery("#color-picker1").hexColorPicker();
    });
</script>