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/

Bernhard Beatus · Accepted Answer · 2021-08-06T19:34:48.790

2

$(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/

edited Aug 06 '21 at 19:34

answered Aug 06 '21 at 17:16

Bernhard Beatus

1,191
1
5
6

Hi @Bernhard. No, it isn't a Wordpress ajax issue. I added a link to a JSFiddle that recreates the error using their AJAX solution and the same error is being triggered. – CRAIG Aug 06 '21 at 18:10
1

Did a JSFiddle for you. Now there is no error anymore and the ajax works. https://jsfiddle.net/bogatyr77/npekLc20/3/ – Bernhard Beatus Aug 06 '21 at 18:34
Ah. Wasn't the ajax. Was the toRgbString(). Added that and it worked. If you want to modify your answer I will approve it. :). Thanks! – CRAIG Aug 06 '21 at 18:42
Modiified my answer and added the JSFIDDLE. Please check the question as answered or upvote. So I will get some points :-) THX – Bernhard Beatus Aug 06 '21 at 19:35

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

1 Answers1