Topic: MDB Color Picker and AJAX

Helmke premium asked 2 years ago

We are using the MSDB Color Picker on one of our pages. The section of the page that contains the color picker is reloaded with an ajax call, so the HTML is replaced. When the ajax call completes, we do attempt to initialize the color picker. The picker does display, but the image is incorrect and sometimes the rest of the page does not load. It is not working at all. Note that there could be multiple pickers on the page. How can we reload the color picker using an Ajax call? Note we are using Bootstrap 4. Thanks, -Rich

Here is our init of the color pickers:

function InitColorPickers() { $('.hscolor-picker').each(function() {
const color_picker_control = new Pickr({
el: '#', useAsButton: true, default: "303030",

                components: {
                preview: true,
                opacity: false,
                hue: true,

                interaction: {
                    hex: true,
                    rgba: false,
                    hsla: false,
                    hsva: true,
                    cmyk: false,
                    input: true,
                    clear: false,
                    save: true
                onSave(hsva) {


Helmke premium answered 2 years ago

Thanks for the reply. I changed my code so when the color button is pressed it calls a javascript function that then creates the color picker and shows it. That has fixed my problem. -Rich

Grzegorz Bujański staff answered 2 years ago

To see what is happening we need an example for which this error occurs. Please add the full code (including HTML) that will help us reproduce this problem.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No