Where do I put JavaScript code from this Bootstrap snippet using CakePHP?

Question

I am learning CakePHP and would like to use this Bootstrap code snippet on my site http://bootsnipp.com/snippets/featured/tabbed-slider-carousel . I put the HTML in the .ctp file in the Pages directory and CSS in custom.less, but where do I put the Javascript code? It doesn't even look like it's being called in the HTML. I tried wrapping the JS in a script tag in the .ctp file, but no luck. Thanks!

Answer 1

Save the CSS and include it using echo $this->Html->css('css_file');

The JS snipped can be put in the .ctp file

$this->Html->scriptBlock('
    $(document).ready( function() {
        $('#myCarousel').carousel({
            interval:   4000
        });

        var clickEvent = false;
        $('#myCarousel').on('click', '.nav a', function() {
                clickEvent = true;
                $('.nav li').removeClass('active');
                $(this).parent().addClass('active');        
        }).on('slid.bs.carousel', function(e) {
            if(!clickEvent) {
                var count = $('.nav').children().length -1;
                var current = $('.nav li.active');
                current.removeClass('active').next().addClass('active');
                var id = parseInt(current.data('slide-to'));
                if(count == id) {
                    $('.nav li').first().addClass('active');    
                }
            }
            clickEvent = false;
        });
    });
');

Are you getting any errors in the console? Is jquery properly included in the page?