0

I created a custom front page using page--front.tpl.php, and I added a Bootstrap carousel on it which works fine, but the javascript I have (carou.js which is in mysubtheme'/js/carou.js') is not called. This is the Drupal behavior code.

(function ($) {
Drupal.behaviors.carou = {
    attach: function(context, settings) {
        $('#myCarousel').carousel({
            pause: false,
            interval: 3000,
        });
    }
}       
})(jQuery);

I added it using the following code in the template.php file.

function bootstrap_subtheme_preprocess_page($vars) {
  if (drupal_is_front_page()) {
     drupal_add_css(drupal_get_path('theme', 'bootstrap_subtheme') . "/css/frontpage.css");
   //adding carou.js to front page
     drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', 'file');
   }
}

I want to control the carousel options of pause: false interval:3000 but I was not able to do so. This makes me think the JavaScript code is not being called, and I don't know what is not right in the code. I am not also very well versed with Drupal behaviors.

What is wrong in my code?

8
  • Does ID myCarousel exist? If you put a console.log() or an alert() in the attach method, is that called?
    – mona lisa
    Jun 13, 2016 at 13:31
  • yeah. it does exist. its the ID for the working carousel (#myCarousel) i have created.
    – OJm
    Jun 13, 2016 at 13:42
  • And what did debugging with a console.log() reveal?
    – mona lisa
    Jun 13, 2016 at 16:45
  • i didn't debug it but what i was meaning is the ID is for the carousel i created
    – OJm
    Jun 13, 2016 at 16:49
  • My subtheme name is bootstrap_subtheme as shown in the code snippet i posted above.
    – OJm
    Jun 13, 2016 at 19:43

1 Answer 1

0

Finally fixed it. I modified the code this way

drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', array( 
                                                                                      'type' => 'file', 
                                                                                      'group' => JS_LIBRARY, 
                                                                                      'weight' => -1)); 

I added group and weight to it then then drupal.behaviors code had some few errors in the structure. The last line was})(jQuery); But i fixed it to }(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.