1

So, this is my code:

  drupal_add_library('system', 'farbtastic');

I've added it to a page callback function (also tried putting in an implementation of hook_page_alter()). It doesn't seem to initialize properly, it fails on the first line of the system library farbtastic,

Uncaught TypeError: Cannot read property 'farbtastic' of undefined

Has anyone had this issue before? Any ideas? I get the sense I'm doing something wrong because farbtastic is part of Drupal core now...

2 Answers 2

1

The Drupal core's farbtastic works differently. You will have to attach it to a an element eg: a form widget. Eg:

colour_mod.module

$form['colour1'] = array(
    '#type' => 'fieldset',
    '#title' => t('Enter Colour:'),
    '#tree' => TRUE,
    '#description' => '<div id="color_picker"></div>',
    '#attached' => array(
        'library' => array(
            array('system', 'farbtastic'),
        ),
        'js' => array(drupal_get_path('module', 'colour_mod') . '/colour_mod.js'),
    ),

);

colour_mod.js:

(function ($) {
  Drupal.behaviors.colour1 = {
    attach: function(context) {
                var farb = $.farbtastic("#color_picker");   
   }
  }
})(jQuery);
1
  • I'm not sure that's the full picture. The above gives me the farbtastic picker, but it doesn't affect the field holding the colour value.
    – joachim
    Jul 23, 2014 at 15:14
0

I've encountered the same "Cannot read property 'farbtastic' of undefined" error and the root cause is that the color picker is not still ready/loaded when the farbtastic's markups need to be injected to that element. My solution is to enclose the farbtastic code to ajaxComplete() event:

your_module.module

$form['marker_color'] = array('#type' => 'textfield',
  '#title' => t('Marker Color'),
  '#default_value' => '#18d',
  '#size' => 7,
  '#attached' => array(
    'library' => array(
      array('system', 'farbtastic'),
    ),
    'js' => array(drupal_get_path('module', 'your_module') . '/js/custom.js'),
    ),
  '#attributes' => array('id' => 'color-picker-target-textfield'),
  '#suffix' => '<div id="color-picker-container"></div>',       
);

js/custom.js

(function ($) {
  Drupal.behaviors.custom_farbtastic = {
    attach : function(context, settings) {
      // Wait the HEX input field to be rendered completely to prevent
      // referencing errors. Pass the context information to speed up
      // DOM traversal/searching.
      $('#color-picker-target-textfield', context).ajaxComplete(function() {
        // Prevent multiple processing.
        $('#color-picker-target-textfield', context).once('color-picker-target-processed', function() {
          // Create a farbtastic colorpicker in the given DIV container.
          var colorPicker = $.farbtastic('color-picker-container');

          // Retrieve the target text field that contains the HEX color strings.
          var colorPickerTarget = $('#color-picker-target-textfield');

          // Make the color picker auto-update the contents of the HEX text field.
          colorPicker.linkTo(colorPickerTarget);
        });
      });
    },
  }
};
})(jQuery);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.