3

i got a problem with bootstrap dropdown

here is my full code https://github.com/PowerChaos/kb/

to explain it easy

 <!-- bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

if i switch the jquery.js above bootstrap.js , then the top navbar dropdown does not work

below are some functions in the script to see who is logged in and display based on login (u()) (a()) and (s()) are functions to user/staff/admin sessions

html code of sidebar below

<?php
if (u())
{
?>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="../home">Knowledge Base</a>
    </div>
    <div class="collapse navbar-collapse" id="header">
        <div class="col-sm-3 col-md-3">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="q">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
      <ul class="nav navbar-nav navbar-right">
              <?php
      if (s())
      {
?>      
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Post Menu
        <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="../s/nieuw">Nieuwe Post</a></li>
        <li><a href="../s/bewerk">Bewerk Post</a></li>
        <li><a href="../s/lijst">zie all posten</a></li>        
        </ul>
      </li>
<?php       
      }
      ?>
          <?php
      if (a())
      {

?>                  
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin Menu
        <span class="caret"></span></a>
        <ul class="dropdown-menu">                  
        <li><a href="../a/gebruikers">Gebruikers</a></li>
        </ul>
      </li>
<?php       
      }
      ?>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $_SESSION['naam'] ?>
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="../pass">wachtwoord</a></li>
          <li><a href="../logout">Log Uit</a></li> 
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>
    <!-- Dynamic SiteBar -->
<div class="navbar-fixed-left">
<ul id="tree1">
<?php
require(getenv("DOCUMENT_ROOT")."/functions/database.php");
    try{    
$stmt = $db->prepare("SELECT * FROM hc");
$stmt->execute();
$result = $stmt->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}
    foreach($result as $info) {
echo "<li>$info[naam]";
echo "<ul>";

    try{
$hc = $info[id];        
$stmthc = $db->prepare("SELECT * FROM shc where hc =:hc");
$stmthc->execute(array(':hc' => $hc));
$resultsub = $stmthc->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}

foreach($resultsub as $sub) {
echo "<li>$sub[naam]";
echo "<ul>";

    try{
$subhc = $sub[id];      
$stmtsubhc = $db->prepare("SELECT * FROM posts where shc =:subhc");
$stmtsubhc->execute(array(':subhc' => $subhc));
$resultpost = $stmtsubhc->fetchall(PDO::FETCH_ASSOC);

}//end try
    catch(Exception $e) {
    echo '<h2><font color=red>';
    var_dump($e->getMessage());
    die ('</h2></font> ');
}

foreach($resultpost as $post) {
echo "<li><a href='../post/$post[id]'>$post[naam]</a></li>";
}
echo "</ul>";
}
echo "</li>";
echo "</ul>";
echo "</li>";
}
?>
</ul>           
</div>
<!-- Dynamic SiteBar -->    
<?php
}
?>
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
            <div class="container content">
10
  • 2
    can you be a little more elaborate pls, if what is switched, what doesn't work in BS dropdown navbar ? may be a non functional Fiddle code will help Sep 19, 2016 at 8:02
  • by switching the jquery.js above bootstrap.js then the header dropdown does not work <div class="collapse navbar-collapse" id="header"> if i put jquery.js below bootstrap.js then everything works exept in console it says bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
    – PowerChaos
    Sep 19, 2016 at 10:11
  • Hmm ok first of all, for bootstrap to work it definitely requires jQuery so include it before bootstrap. Following this order you need to fix what is broken & why is the navbar not working. This is a different issue. but first order should always be jquery > bootstrap Sep 19, 2016 at 10:24
  • thank you, on jsfiddle jsfiddle.net/3t42fbw3/2 it does work but on my script it does not work if i include jquery first , then the topnavbar dropdown fails to work , it only works if i put the jsquery under the bootstrap, what do i need to change then to get the dropdown working when jsquery is before bootstrap ?
    – PowerChaos
    Sep 19, 2016 at 10:39
  • ok can you tell me when you click the dropdown(when it fails), what is the browser console error that comes(Ctrl + Shift + C). Sep 19, 2016 at 10:47

2 Answers 2

3

Overview of how bootstrap dropdown works

When you click the dropdown-toggle element, bootstrap adds a class called open to its parent element & that's what makes it visible.

Reason why its not working

For some reason which is weird, your dropdown is not getting the class open on it when clicked. When I explicitly add the class in the debugger it works.

Solution

You can write your own piece of code which adds the class "open" to the dropdown like so:

$('.dropdown-toggle').click(function(){
  var parent = $(this).parent();
  if(parent.hasClass('open')) { 
    parent.removeClass('open'); 
  } else {
     parent.addClass('open');
  }
});

Add this after you initialise your treeviews or anywhere after bootstrap.js

1
  • Thank you , this solution also works for summernote dropdown ( wysiwig editor )
    – PowerChaos
    Sep 19, 2016 at 14:58
0

Use the jquery 1.11.1 version and place the scripts before the links:

<script src="jquery/jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/styles.css"/> 

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.