CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapcakephp
SunT
SunT

Reputation: 333

Dropdown menu not working properly

I have a Dropdown menu that shows 2 links, one to my image gallery and other to the video gallery, but when I am in a view except my index.ctp, the dropdown doesn´t open at all. If I place dropdown.js from the "source code" distribuition and include it in the layout the dropdowns don't work in index.ctp but they work on the other views. Also while searching on google I found this thread wich allowed me to use it in all views but the menus only open once, what is the issue with this?

I am using twitter bootstrap 3.1.1 and CakePHP 2.4.4

Layout

      <li class="dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Serviços <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li>
                <li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li>
                <li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li>
                <li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li>
                <li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li>
            </ul>
        </li>

Layout head

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><?php echo $title_for_layout;//titulo dinamico da página?></title>
    <?php
    echo $this->Html->meta('icon');
    //echo $this->Html->css('cake.generic');
    echo $this->fetch('meta');
    echo $this->fetch('css');

    echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');
    echo $this->fetch('script');
    echo $this->element('fancybox_links');
    echo $this->Html->script('jquery-1.11.0');
    echo $this->Html->script('main');
    echo $this->element('fancybox_links');
    echo $this->Html->css('http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5');
    echo $this->Html->script('http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5');        
    echo $this->Html->css('bootstrap-theme.min');
    echo $this->Html->css('main');
    echo $this->Html->css('bootstrap.min');
    echo $this->Html->css('bootstrap');
    echo $this->Html->script('bootstrap');
    echo $this->Html->script('bootstrap.min');
    echo $this->Html->script('dropdown');
    ?>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $(".dropdown-toggle").click(function(){
                $(this).dropdown('toggle');
            });
        });    
    </script>
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
            $(document).ready(function () {
                $(".fancybox3").fancybox(e){
                    openEffect : 'none',
                    closeEffect : 'none',
                    helpers : {
                        title : {
                            type : 'float'
                        }
                    }
                    e.preventDefault;
                });
            });
    </script> 
    <!--<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>-->
</head>

Upvotes: 0

Views: 1726

Answers (2)

SunT
SunT

Reputation: 333

After having cleaned up the js folder and having reinstalled fancybox from here , and then this plugin, the dropdowns started working how they should.

Leyout Head

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><?php echo $title_for_layout;//titulo dinamico da página?></title>
    <?php
    echo $this->Html->meta('icon');
    //echo $this->Html->css('cake.generic');
    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');
    echo $this->fetch('script');
    echo $this->Html->script('jquery-1.11.0.min');
    echo $this->Html->script('main');
    echo $this->Html->css('main');

    echo $this->Html->css('bootstrap-theme.min');
    echo $this->Html->css('bootstrap.min');
    echo $this->Html->css('bootstrap');

    echo $this->Html->script('bootstrap.min');
    echo $this->Html->script('bootstrap');
    echo $this->Html->script('dropdown');
    echo $this->Html->script('collapse');
    ?>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $(".dropdown-toggle").click(function(){
                $(this).dropdown('toggle');
            });
        });    
    </script>
    <!--<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
            $(document).ready(function () {
                $(".fancybox3").fancybox(e){
                    openEffect : 'none',
                    closeEffect : 'none',
                    helpers : {
                        title : {
                            type : 'float'
                        }
                    }
                    e.preventDefault;
                });
            });
    </script> -->
    </head>

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

I think you missed to load bootstrap and jquery on other pages.

You need to include bootstrap and jquery in your common file or in header section.

Also check for confliction if you used other framework/library.

Upvotes: 1

Related Questions