Title: colorpicker callback modification
Last modified: November 16, 2018

---

# colorpicker callback modification

 *  Resolved [davera](https://wordpress.org/support/users/davera/)
 * (@davera)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/)
 * Is there any way to modify the colorpicker iris callback options?
 * I’m looking to add a callback on change for the colorpicker in repeatable group
   fields.
 * For example:
 *     ```
       $group_field_id = $cmb2->add_field(array(
                   'id'          => $prefix . '_color_group',
                   'type'        => 'group',
                   'description' => __('Generates reusable form entries', 'cmb2'),
                   'options'     => array(
               'group_title'   => __('Color {#}', 'cmb2'),
               'add_button'    => __('Add Another Color', 'cmb2'),
               'remove_button' => __('Remove Color', 'cmb2'),
               'sortable'      => true,
           ),
               ));
   
               $cmb2->add_group_field($group_field_id, array(
                   'name' => 'Border/Line Color',
                   'id'   => $prefix . '_color',
                   'type' => 'colorpicker',
                   'classes' => 'chart-border-line-color half-col-option',    
               ));
   
               $cmb2->add_group_field($group_field_id, array(
                   'name' => 'Background/Fill Color',
                   'id'   => $prefix . '_fill_color',
                   'classes' => 'chart-bg-fill-color half-col-option',
                   'type' => 'colorpicker',
               ));
       ```
   
 * I want to do something as below but it doesn’t behave properly. The chosen color
   doesn’t always show up in the preview box with this method:
 *     ```
       $('input.wp-color-picker').iris({
                   change: function(event, ui){
       update_graph_colors();
                   },
               });
       ```
   
 * Any input on this? In the docs I only see options to modify the colorpicker options
   but not for callbacks for the colorpicker.
    -  This topic was modified 7 years, 6 months ago by [davera](https://wordpress.org/support/users/davera/).
      Reason: code tags
    -  This topic was modified 7 years, 6 months ago by [davera](https://wordpress.org/support/users/davera/).
    -  This topic was modified 7 years, 6 months ago by [davera](https://wordpress.org/support/users/davera/).

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/)
 * (@tw2113)
 * The BenchPresser
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10889063)
 * If `update_graph_colors()` is something you wrote for a js function, can you 
   provide that as well, so we can try and recreate the best we can.
 *  Thread Starter [davera](https://wordpress.org/support/users/davera/)
 * (@davera)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10889139)
 * It’s just a function to refresh a graph preview section with the new colors, 
   triggered after a user changes or adds a new color. It updates another function
   which outputs json to the page to be read by the graph:
 *     ```
       function update_chart_colors()
       {
   
         var fill_colors = [];
         var line_colors = [];
   
         $('.chart-bg-fill-color').each(function(){
           var curr_fill_color = $(this).find('input.wp-color-picker');
           fill_colors.push(curr_fill_color.val());
         });
   
         $('.chart-border-line-color').each(function(){
         var curr_color = $(this).find('input.wp-color-picker');
           if (curr_color != 'undefined') {
             line_colors.push(curr_color.val());
           }
         });
   
         update_chart('color_bg', fill_colors.toString());
         update_chart('color', line_colors.toString());
   
       }
       ```
   
 *     ```
       function update_chart(option, value){
       var curr_graph_setting = jQuery.parseJSON(document.getElementById('script-container-graph').innerHTML);
       curr_graph_setting[option] = value;
       var updated_json = JSON.stringify(curr_graph_setting);
       $('#script-container-HC-1').html(updated_json);
   
       }
       ```
   
 *  Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/)
 * (@tw2113)
 * The BenchPresser
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10889173)
 * Thanks
 *  Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/)
 * (@tw2113)
 * The BenchPresser
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10889970)
 * I don’t have a great answer or this, after kicking some tires for about an hour
   or so.
 * With the version above, I am not quite sure how to provide the custom `change`
   callback to the Iris config. It’s found at [https://github.com/Automattic/Iris/blob/master/src/iris.js](https://github.com/Automattic/Iris/blob/master/src/iris.js)
   for a non-minified form. My js may be weak enough to not know how to spot it.
 * I had noticed that we have an overridden “alpha” version with CMB2, which adds
   some alpha channels to the color pickers. that “alpha => true” spot in the options
   spot in our docs.
 * With that alpha-powered js file loaded, it DOES easily allow for providing a 
   change callback option as demo’d at [https://github.com/CMB2/CMB2/wiki/Field-Types#colorpicker](https://github.com/CMB2/CMB2/wiki/Field-Types#colorpicker).
   Example:
 *     ```
       'attributes' => array(
       	'data-colorpicker' => json_encode( array(
       		'change' => 'testing',
       	) ),
       ),
       ```
   
 * Part of that `wp-color-picker-alpha.js` file is an anonymous function already
   set for the iris config, but it tries to invoke a function passed in like my “
   testing” above. However, it’s failing an if statement check to see if the passed
   value is a function. It’s evaluating to string.
 *     ```
       if ( $.isFunction( self.options.change ) ) {
       	self.options.change.call( this, event, ui );
       }
       ```
   
 * Googling showed we could get a function out of a string like this:
 *     ```
       if ( $.isFunction( window[self.options.change] ) ) {
       	window[self.options.change].call( this, event, ui );
       }
       ```
   
 * BUT we don’t have that as part of CMB2 core. So there’s no great way to get it
   in there, unless you want to edit and re-minify yourself. Not sure how much work
   you want to do for that part.
 * I do think/feel there’s an unintended bug in the $.isFunction() part that didn’t
   fully account for things, and how things would be passed. We’re not able to easily
   pass non-string values because they would be defined in PHP mode, and thus interpreted
   as PHP functions.
 * Looking back to the original replies, I could see why it could be flaky, as I
   think that attempt with the JS is trying to invoke a new Iris instance on the
   specified selector. If it does actually return the current instance, then cool,
   but still probably part of why it’s a bit flaky.
 *  Thread Starter [davera](https://wordpress.org/support/users/davera/)
 * (@davera)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10889992)
 * Thanks for taking the time. I figured it out though!
 * The iris file included overrides the default WP iris, so I just called an another
   instance of that to override the CMB2 iris function as well so I could add my
   change callback in there as so:
 *     ```
       $.widget( 'a8c.iris', $.a8c.iris, {
   
         _change: function() {
             this._super();
   
             var self = this,
               el   = self.element;
   
             console.log('changed color');
             update_chart_colors();
           },
         });
       ```
   
 * Works like a charm! Didn’t have to edit the core file or anything, just added
   that to my JS.
 *  Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/)
 * (@tw2113)
 * The BenchPresser
 * [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10890028)
 * Won’t see me arguing. 😀

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘colorpicker callback modification’ is closed to new replies.

 * ![](https://ps.w.org/cmb2/assets/icon.svg?rev=2866672)
 * [CMB2](https://wordpress.org/plugins/cmb2/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cmb2/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cmb2/)
 * [Active Topics](https://wordpress.org/support/plugin/cmb2/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cmb2/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cmb2/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Michael Beckwith](https://wordpress.org/support/users/tw2113/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/colorpicker-callback-modification/#post-10890028)
 * Status: resolved