DawnZHANG DawnZHANG - 1 month ago 7
Javascript Question

Bootstrap Carousel not working! Everything checked, still not working

Please see my code folks, I'm desperate..



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- jquery ui -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function slideFav() {
alert("in slideFav");
$('#myFavCarousel').carousel('next');
}

</script>
</head>
<body>
<!-- favorite content -->
<div id="favorite">
<div class="page-header">
<h3>Favorites</h3>
</div>
<div class="well well-sm">
<!-- CAROUSEL START HERE **************************************************-->
<div id="myfavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="panel panel-default item active">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="legislators">
<div class="panel-heading" style="overflow:hidden;">
<span class="panel_heading_text">Favorite Legislators</span>
</div>
<!-- panel_heading -->
<!-- FAVOIRTE**************************************************-->
<div class="panel-body">
<table class="table table-hover table-responsive" id="all_favorite_table">
<thead>
<tr>
<th>&nbsp;&nbsp;&nbsp;</th>
<th>Image</th>
</tr>
<tr>
<th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
<th>Image</th>
</tr>
</thead>
</table>
</div>
<!-- panel_body -->
</div>
<!-- ******************************************************* -->
</div>
<!-- tab-content -->
</div>
<!-- panel panel-default item active -->
<!-- DETAILDED PAGE******************************************************* -->
<div class="panel item">
<div class="panel-heading row">
<div>
<!-- change button func to slideFav()-->
<div style="float:left; margin-left:15px;"><button href="#myfavCarousel" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
<div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;"> Details</div>
</div>
</div>
<!-- DETAILDED PAGE for favorite******************************************************* -->
</div>
</div>
<!-- carousel-inner -->
</div>
<!-- carousel slide -->
</div>
</div>
<!-- main_favorite -->
</body>
</html>





I'm trying to realize the function that if you click on the button "view Detail", it will slide to the detail page using jquery.
It's not working, I could not figure out what is wrong with my code, please help! Thank you so much in advance!

Answer

id is case sensitive. So use $('#myfavCarousel').carousel('next'); instead of $('#myFavCarousel').carousel('next');:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <!-- jquery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <!-- jquery ui -->
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <!-- bootstrap -->
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script>
         function slideFav() {
         	alert("in slideFav");
         	$('#myfavCarousel').carousel('next');
         }
         
      </script>
   </head>
   <body>
      <!-- favorite content -->
      <div id="favorite">
         <div class="page-header">
            <h3>Favorites</h3>
         </div>
         <div class="well well-sm">
            <!-- CAROUSEL START HERE **************************************************-->
            <div id="myfavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                  <div class="panel panel-default item active">
                     <!-- Nav tabs -->
                     <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
                     </ul>
                     <!-- Tab panes -->
                     <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="legislators">
                           <div class="panel-heading" style="overflow:hidden;">
                              <span class="panel_heading_text">Favorite Legislators</span>
                           </div>
                           <!-- panel_heading -->
                           <!-- FAVOIRTE**************************************************-->
                           <div class="panel-body">
                              <table class="table table-hover table-responsive" id="all_favorite_table">
                                 <thead>
                                    <tr>
                                       <th>&nbsp;&nbsp;&nbsp;</th>
                                       <th>Image</th>
                                    </tr>
                                    <tr>
                                       <th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
                                       <th>Image</th>
                                    </tr>
                                 </thead>
                              </table>
                           </div>
                           <!-- panel_body -->
                        </div>
                        <!-- ******************************************************* -->
                     </div>
                     <!-- tab-content -->
                  </div>
                  <!-- panel panel-default item active -->
                  <!-- DETAILDED PAGE******************************************************* -->
                  <div class="panel item">
                     <div class="panel-heading row">
                        <div>
                           <!-- change button func to slideFav()-->
                           <div style="float:left; margin-left:15px;"><button href="#myfavCarousel" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
                           <div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;"> Details</div>
                        </div>
                     </div>
                     <!-- DETAILDED PAGE for favorite******************************************************* -->	
                  </div>
               </div>
               <!-- carousel-inner -->
            </div>
            <!-- carousel slide -->
         </div>
      </div>
      <!-- main_favorite -->
   </body>
</html>