1

I am trying to use with Javascript in Drupal 8. I took an example from official drupal website, which I got it from https://www.drupal.org/project/examples and modified the code of js_example to incorporate sDashboard library.

The js_example.libraries.yml includes:

# A simple script using jquery ui accordion.
js_example.accordion:
  js:
    js/js_example_accordion.js: {}
  # Build up our dependencies for this page as a library. Our accordion script
  # needs jquery.ui.accordion. You can find the core scripts under core/assets/.
  dependencies:
    - core/jquery.ui.accordion
    - core/jquery

js_example.sdashboard:
  js:
    js/jquery-sDashboard.js : {}
  css:
    component:
      css/sDashboard.css: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables

The example module includes a Controller which I modified as:

public function getJsAccordionImplementation() {
    $title = t('Click sections to expand or collapse:');
    // Build using our theme. This gives us content, which is not a good
    // practice, but which allows us to demonstrate adding JavaScript here.
    $build['myelement'] = array(
      '#theme' => 'js_example_accordion',
      '#title' => $title,
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.accordion';
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.sdashboard';
    // Return the renderable array.
    return $build;
  }

and there is an accordion.html.twig where I added the code for displaying the sdashboard widget. It is given as:

<div class="demo">
<h2>{{  title }}</h2>
<div id="accordion">
  .... accordion here ...
</div>
<ul id="myDashboard"></ul>
<script type="text/javascript" >
  var tdata = [],i;

  for(i=0;i<4*Math.PI;i++){
  tdata.push([i,Math.sin(i)]);
  }

  var widgetDefinitions = [
  {   widgetTitle:"Plot Example",
      widgetId : "first" ,
      widgetType : "chart" , 
      widgetContent : {
      data : [tdata],
      options : {points:{show:true}}
      }

  }
  ]
  $("#myDashboard").sDashboard({
  dashboardData : widgetDefinitions
  });
</script>

</div>

Now when I am trying to run the example, I get the error:

ReferenceError: $ is not defined 
$("#myDashboard").sDashboard({
accordion (line 299, col 3)
ReferenceError: Flotr is not defined
factory($, Flotr);

Isn't this the usual way of using any external library in drupal. How do I use other libraries that I may need like sDashboard, etc?

2

If you are trying to add a js library from an external cdn in drupal 8 then, in your theme/module mycustom.libraries.yml file add do like this:

NOTE: Make sure you indent each spaces with two spacebar press button and not a tab press.

NOTE: version is optional here. You may not need add in.

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css: {type: external}
  js:
    //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css: {type: external}
  dependencies:
    - core/jquery

If you are hosting it within your module or theme then:

NOTE: Here I placed flexslider within my theme or module vendor directory. So it would be inside mycustom/vendor/flexslider

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      vendor/flexslider/flexslider.css: {}
  js:
    vendor/flexslider/jquery.flexslider-min.js: {}
  dependencies:
    - core/jquery

If you are just trying to host your custom js or css file then:

mycustom.myscript:
  js:
    js/script.js: {}

If its dependent on other library like core jquery or custom library then:

mycustom.myscript:
  js:
    js/script.js: {}
  dependencies:
   - core/jquery
   - mycustom.myscript2

Then like in example module If I had to add flexslider library:

public function getFlexSliderImplementation() {

    $build['myelement'] = array(
      '#theme' => 'js_flexslider',
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'mycustom/mycustom.flexslider';
    // Return the renderable array.
    return $build;
  }

Update: Download and extract Flotr2 to your module or theme vendor directory. Modify libraries.yml file to include flotr2

js_example.flotr2:
 js:
   vendor/flotr2/flotr2.min.js : {}

js_example.sdashboard:
  css:
    component:
      vendor/sDashboard/sDashboard.css: {}
  js:
    vendor/sDashboard/jquery-sDashboard.js : {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables
    - js_example/js_example.flotr2
| improve this answer | |
  • I have added the libraries in the libraries.yml file but I cannot use it on the program. I have done exactly like yours. Can you have a look into the code above if there is any mistake? Thanks. – Pant Nov 8 '16 at 3:14
  • Have you defined hook_theme to register your twig file with drupal in your .module file. – sarathkm Nov 8 '16 at 3:26
  • Yes i have used the example project from drupal which provided a sample js_example. It has made hook_theme implementation. I can see both sdashboard css and js loaded but still get the problem – Pant Nov 8 '16 at 3:28
  • You are using Flotr have you added in libraries.yml and defined it in your controller. – sarathkm Nov 8 '16 at 3:30
  • Yes. Can you take a look at my question above? I have mentioned the problem also. Thanks – Pant Nov 8 '16 at 3:31

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.