Can't get wpColorPicker to work in a widget

Question

I can show the color picker, I can change the color and see the save button watching that, however nothing is saved to DB and I'm getting

Undefined index: my_color", file: "wp-content/plugins/my_plugin/my_color.php", line: 53

This is my widget:

<?php
class widget007 extends WP_Widget {

    function __construct() {
        add_action('admin_print_styles-widgets.php', array( $this, 'load_color_picker_style' ) );
        $args = array(
            'name' => esc_html__( 'widget007', 'txt-domaine' ),
            'description' => esc_html__( 'Something', 'txt-domaine' )
        );
        parent::__construct( 'my_widget007', '', $args );
    }

    function load_color_picker_style() {
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' ); 
    }

    function form( $instance ) {
        $my_color = ! empty( $instance['my_color'] ) ? $instance['my_color'] : '';
        ?>
        <p>  
            <label for="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>">Color</label>
            <input class="color-picker" type="text" id="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>" value="<?php echo $my_color; ?>" />
        </p>
        <script>
            ( function( $ ){
                function initColorPicker( widget ) {
                    widget.find( '.color-picker' ).wpColorPicker( {
                        change: _.throttle( function() { // For Customizer
                            $(this).trigger( 'change' );
                        }, 3000 )
                    });
                }

                function onFormUpdate( event, widget ) {
                    initColorPicker( widget );
                }

                $( document ).on( 'widget-added widget-updated', onFormUpdate );

                $( document ).ready( function() {
                    $( '#widgets-right .widget:has(.color-picker)' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
            }( jQuery ) );
        </script>
        <?php
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['my_color']  =  $new_instance['my_color'];
        return $instance;
    }
}

add_action( 'widgets_init', function(){
    register_widget( 'widget007' );
});

Answer 1

Please try this modified code:

class widget007 extends WP_Widget {

        function __construct() {
            add_action('admin_print_styles-widgets.php', array( $this, 'load_color_picker_style' ) );
            $args = array(
                'name' => esc_html__( 'widget007', 'txt-domaine' ),
                'description' => esc_html__( 'Something', 'txt-domaine' )
            );
            parent::__construct( 'my_widget007', '', $args );
        }

        function load_color_picker_style() {
            wp_enqueue_style( 'wp-color-picker' );
            wp_enqueue_script( 'wp-color-picker' ); 
            wp_enqueue_script( 'underscore' );
        }

        function form( $instance ) {
            $my_color = esc_attr( $instance[ 'my_color' ] );
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( 'my_color' ); ?>">Color</label>
                <input type="text" name="<?php echo $this->get_field_name( 'my_color' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'my_color' ); ?>" value="<?php echo $my_color; ?>" />
            </p>
            <script>
                ( function( $ ){
                    function initColorPicker( widget ) {
                        widget.find( '.color-picker' ).wpColorPicker( {
                            change: _.throttle( function() { // For Customizer
                                $(this).trigger( 'change' );
                            }, 4000 )
                        });
                    }

                    function onFormUpdate( event, widget ) {
                        initColorPicker( widget );
                    }

                    $( document ).on( 'widget-added widget-updated', onFormUpdate );

                    $( document ).ready( function() {
                        $( '#widgets-right .widget:has(.color-picker)' ).each( function () {
                            initColorPicker( $( this ) );
                        } );
                    } );
                }( jQuery ) );
            </script>
            <?php
        }

        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance['my_color']  = strip_tags( $new_instance['my_color'] );

            return $instance;
        }
    }

    add_action( 'widgets_init', function(){
        register_widget( 'widget007' );
    });