0

I am creating a Highstock (Highcharts) page in a Drupal site and I cannot seem to add the datepicker element. I have successfully implemented it in a non-Drupal environment here:

https://jsfiddle.net/MrSnrub/g7u14p10/

...but when I try to migrate it to a Drupal module, it fails. As I understand it, both jQuery and jQuery UI are installed by default in Drupal, is there a specific version that I need to worry about? When I load up Firebug, it does not give me an error about the datepicker, so it must be interpreting it correctly, but when I load the page and click on the textbox, no datepicker appears. I have jquery_update module installed, and I'm running Drupal 7. Here is my relevant Highstock JavaScript code:

$('#div-highstock-container').highcharts('StockChart', {
  chart: {
    renderTo: 'div-highstock-container',
    events: {
      load: create_new_legend
    }
  },

  // ...

  series: seriesOptions     
}, 
function(chart) {
  // apply the date pickers
  setTimeout(function() {
    $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
  }, 0)
});

HTML:

<div id="div-container">
  <div id="div-highstock-container"></div>
  <div id="div-new-legend"></div>
</div>

PHP (in hook_page):

drupal_add_library('system', 'ui.datepicker');
drupal_add_js('
  jQuery(document).ready(
    function() {
      jQuery( ".highcharts-input-group" ).datepicker({
        autoSize: true
      });
    }
  );
', 'inline');

Do I need to call the datepicker() method in the PHP code or in the JavaScript code at the end of the highcharts() object creation function call, or both?

UPDATE: I changed the PHP code to the following, but the datepicker is still not showing:

drupal_add_js('
  (function ($) {
    Drupal.behaviors.addHighStockDatepicker = {
      attach: function(context, settings) {
        $( ".highcharts-range-selector" ).datepicker();
      }
    }
  })(jQuery);
', 'inline');

If I change the element from ".highcharts-range-selector" to "#div-highstock-container" the datepicker does appear in the main container (therefore, I know I am loading the jQuery library datepicker file successfully), so why does it not appear when I try to apply it to all elements with class "highcharts-range-selector"?

2

The datepicker was being displayed, it was just hidden by the Highchart. Adding z-index: 9999 !important; to the .ui-datepicker CSS solved it.

0

You need to wrap your JS code with Drupal behaviors, which can ensure your JS run after all required DOM elements in page are ready.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
      // Code to be run on page load, and
      // on ajax load added here
    }
  };
}(jQuery));

Also, you are not sure how to know if the jQuery is working. You can add console.log to output the jQuery object in console.

var obj = jQuery( ".highcharts-input-group" );
console.log(obj);
  • Is ALL of my JavaScript code supposed to go in Drupal.behaviors or just the call to the datepicker() function? – MrSnrub Aug 11 '16 at 13:13
  • @MrSnrub Yes. But there is exception. If you want to define some helper function or global JS object. You should not write them into Drupal.behaviors. – Jimmy Ko Aug 11 '16 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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