Preventing Error when using jQuery Spectrum Color Picker to Call an Ajax function

Question

I am using jQuery Spectrum and trying to call another function when a color is changed.

The other function has an ajax call, however, and when it runs, I get this error:

spectrum.js?ver=1.0.7:1277 Uncaught TypeError: Cannot read property 'getBrightness' of undefined

I assume it has something to do with the synchronicity of the calls, but am not sure how to resolve it.

            jQuery('#mydiv').spectrum({
                preferredFormat: "rgb",
                showAlpha: true,
                showPalette: true,
                showInitial: true,

                showSelectionPalette: true,
                palette: ['rgba(0, 0, 0, 0)'],
                showInput: true,
                allowEmpty: true,
                move: function(c) {

                 my_function(c);


                },
                change: function(c) {

                  my_function(c);

                }
            });

Then the function I am calling is this:

function my_function(color) {



        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            datatype: 'JSON',
            data: {
                action: 'update_data',
                color: color,
          
            },
            success: function(data) {

              


            }

        });


}

Is there anything I can do to make this work properly?

Here is a JSFiddle that provides the error as well:

https://jsfiddle.net/xstatic/8px3ynq0/11/

Answer 1

$(document).ready(function() {
  $('#custom').spectrum({
    preferredFormat: "rgb",
    showAlpha: true,
    showPalette: true,
    showInitial: true,
    showSelectionPalette: true,
    palette: ['rgba(0, 0, 0, 0)'],
    showInput: true,
    allowEmpty: true,
    change: function(color) {
      console.log(color.toRgbString());
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.0.7/spectrum.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.0.7/spectrum.min.js"></script>
<input type='text' id="custom" />

Here is a working example with ajax call as jsfiddle: https://jsfiddle.net/bogatyr77/npekLc20/4/