Dropdown does not work

Asked

Viewed 2,573 times

-1

I have a dropdown menu that shows links to the gallery and videos, however, if you’re in a view other than index.ctp the dropdown no longer works. But if I take dropdown.js of the "source code" distribution and to be included in the layout, dropdowns in the index.ctp but on the other pages it already works. When searching in google I discovered a thread that made dropdowns work, yet only opened once in the view index.ctp. what’s the matter?

I’m using twitter bootstrap (the most compact version) 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>

Head of the Layout

 <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>

Errors of the poster.ctp view.

Errors in the index.ctp view.

html cakephp twitter-bootstrap
  • 2

    How come it doesn’t work?

  • Your li.dropdown is inside a ul right?

  • Yes it is, it only works if I’m in the view index.ctp, on other pages is empty, the link is left with the # but the dropdown does not open.

  • If it only works on one page, you are sure that on the others you are calling css and javascript correctly?

  • Yes, they all use the same layout. I’m going to update the issue with the errors that appear on the Chrome console.

  • I am now seeing that the files with error 404 have previous version to fancybox in the link of your comment and the plugin I am using. Is there any way through the console to know exactly what these files require?

Show 1 more comment

2 answers

1

As I am not allowed to comment I am responding. From what I see of the errors the scripts that you use are not being loaded. Start trying to solve the bugs from top to bottom.

First why the jQuery It’s not being loaded. Then I see some unauthorized access, you gotta make sure your scripts are accessible.

Inspects the page of each cartaz.ctp and index.ctp and experience the link of each scripts in the browser see if anything pops up, if there’s no or access denied.

  • These fancybox errors are quite strange, as he is asking for files that do not even exist in plugin fancybox for the Cakephp I’m using, and just reinstalling it I continue with the same set of errors.

  • 1

    They can be external files. Have you seen this?

  • The files in the Link you placed are newer, have different versions. I don’t think I installed mine correctly plugin, would it be possible to give me a hand in this? I am not understanding very well steps 2 and 4, nor where to place the content of zip.

  • See this. From what I understand you have to unzip the zip and put the content in 'app/Plugin'

  • That’s what I did. I also saw that the files that are missing are files belonging to Fancybox 1, however in the instructions, the link leads to Fancybox 2, and that also some of the files that are missing are included in the layout and the files exist in the webroot folder.

0


After doing a cleaning of . js files in the webroot folder, and having reisntalado the fancybox, of this link, and then this plugin, dropdowns started working correctly.

Head of the Layout

 <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>

Browser other questions tagged html cakephp twitter-bootstrap

You are not signed in. Login or sign up in order to post.