Предотвращение ошибок при использовании средства выбора цвета спектра jQuery для вызова функции Ajax

#jquery #spectrumjs

Вопрос:

Я использую jQuery Spectrum и пытаюсь вызвать другую функцию при изменении цвета.

Однако у другой функции есть вызов ajax, и когда она запускается, я получаю эту ошибку:

spectrum.js?ver=1.0.7:1277 Неперехваченная ошибка типа: Не удается прочитать свойство «Правильность» неопределенного

Я предполагаю, что это как-то связано с синхронностью вызовов, но не уверен, как это решить.

             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);

                }
            });
 

Тогда функция, которую я вызываю, выглядит так:

 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) {

              


            }

        });


}
 

Могу ли я что-нибудь сделать, чтобы это работало должным образом?

Вот JSFiddle, который также выдает ошибку:

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

Ответ №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" />
 

Вот рабочий пример с вызовом ajax в качестве jsfiddle: https://jsfiddle.net/bogatyr77/npekLc20/4/

Комментарии:

1. Привет @Bernhard. Нет, это не проблема WordPress ajax. Я добавил ссылку на JSFiddle, которая воссоздает ошибку, используя их решение AJAX, и запускается та же ошибка.

2. Сделал для тебя JSFiddle. Теперь ошибок больше нет, и ajax работает. jsfiddle.net/bogatyr77/npekLc20/3

3. А, это был не аякс. Была строка toRgbString(). Добавил это, и это сработало. Если вы хотите изменить свой ответ, я его одобрю. :). Спасибо!

4. Изменил свой ответ и добавил JSFIDDLE. Пожалуйста, проверьте вопрос как отвеченный или проголосуйте. Так что я получу несколько очков 🙂 THX