Forum : Problème intégration dropdown bootstrap twitter cakephp

Bonjour, donc déjà pour votre information je connais rien en javascript et rien jquery mais je veux bien l'utilisé.

Voila, je veux utilisé le dropdown du bootstrap de twitter mais il ne fonctionne pas, j'ai fait pas mal de recherche, j'ai remarqué dans la console de firebug une erreur du genre

$(".dropdown-toggle").dropdown is not a function

alors que dans le doc du bootstrap http://twitter.github.com/bootstrap/javascript.html#dropdowns il dise d'insérer ce script. Soit je mis prend mal soit il y a un souci.

j'ai intégrer le plugin jquery et le bootstrap.js dans la page default de cake et le script dans la page ou je l'utilise
J'ai essayé plusieurs combinaison rien ne marche.

voici mon default.ctp

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?php echo $title_for_layout; ?></title>
        <?php echo $this->Html->css('bootstrap.css'); ?>
        <?php echo $this->fetch('meta'); ?>
        <?php echo $this->fetch('css'); ?>
        <?php echo $this->fetch('script'); ?>
    </head>
    <body>
        <div class="page-header">
            <?php echo $this->element('header'); ?>
        </div>
        <div class="container">
            <?php echo debug($user); ?>
            <?php echo $this->fetch('content'); ?>
        </div>
        <div class="modal-footer">
            <h6><?php echo $this->element('sql_dump'); ?></h6>
        </div>
        <?php echo $this->Html->script('bootstrap.js'); ?>   
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </body>
</html>

et mon header la ou je veux utilisé le dropdown

<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <?php echo $this->Html->link("Index",'/', array('class' => 'brand')); ?>
                <ul class="nav">
                    <li>
                        <?php echo $this->Html->link("Actualité",'/posts/index'); ?>
                    </li>
                    <li>
                        <?php echo $this->Html->link("User",'/users/index'); ?>
                    </li>
                    <li>
                        <a href="#">Forum</a>
                    </li>
                    <li>
                        <a href="#">Partenaire</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <?php echo $user'username']; ?>
                        <b class="caret"></b>
                        </a>
                        <ul class="dopdown-menu">
                            <li>test</li>
                            <li>test</li>
                            <li>test</li>
                            <li class="divider"></li>
                            <li><?php echo $this->Html->link("Déconnexion",'/users/logout'); ?></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<?php } ?>
<script type="text/javascript">
    $('.dropdown-toggle').dropdown()
</script>

si je l'ai mal intégrer dite le moi.

2 réponses

Ch0c4,

il y a 14 ans

Bon mis a jour, désolé du double post, j'ai réussi à enlever l'erreur de la console de firebug mais il ne marche tout de même pas, c'est à dire qu'il m'affiche toute la liste sans que j'appuie sur le lien qui permettrai de faire descendre le dropdown.Mise à jour des codes.
le header.ctp

<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <?php echo $this->Html->link("Index",'/', array('class' => 'brand')); ?>
                <ul class="nav">
                    <li>
                        <?php echo $this->Html->link("Actualité",'/posts/index'); ?>
                    </li>
                    <li>
                        <?php echo $this->Html->link("User",'/users/index'); ?>
                    </li>
                    <li>
                        <a href="#">Forum</a>
                    </li>
                    <li>
                        <a href="#">Partenaire</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <?php echo $user'username']; ?>
                        <b class="caret"></b>
                        </a>
                        <ul class="dopdown-menu">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li class="divider"></li>
                            <li><?php echo $this->Html->link("Déconnexion",'/users/logout'); ?></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
    $('.dropdown-toggle').dropdown()
</script>

le default.ctp

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?php echo $title_for_layout; ?></title>
        <?php echo $this->Html->css('bootstrap.css'); ?>
        <?php echo $this->fetch('meta'); ?>
        <?php echo $this->fetch('css'); ?>
        <?php echo $this->fetch('script'); ?>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <div class="page-header">
            <?php echo $this->element('header'); ?>
        </div>
        <div class="container">
            <?php echo debug($user); ?>
            <?php echo $this->fetch('content'); ?>
        </div>
        <div class="modal-footer">
            <h6><?php echo $this->element('sql_dump'); ?></h6>
        </div>

        <?php echo $this->Html->script('bootstrap.js'); ?> 
    </body>
</html>

L'erreur de la console c'était au niveau de l'ordre du chargement des scripts. Mais après aucune idée.

Ch0c4,

il y a 14 ans

Trouvé désolé du triple post j'ai mis dopdown ou lieu de d r opdown voila.
L'erreur bête et méchante.
Merci.