Navigation bar dropdown not working
Question
I create a dynamic navigation bar from bootstrap. The menu and sub menu are loaded from a MySQL database. It worked before but now the dropdown does not work. After adding datepicker bootstrap input. Here is my code:
This is navbar.php
<?php
include_once 'inc/config.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Author" content="Muhamad Firdaus Hidayat"/>
<!-- Bower Components -->
<link rel="stylesheet" href="bowercomponents/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bowercomponents/datepicker/bootstrap-datepicker3.css" />
<script type="text/javascript" src="bowercomponents/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="bowercomponents/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bowercomponents/jquery/jquery-3.1.1.js"></script>
<script type="text/javascript" src="bowercomponents/moment/min/moment.min.js"></script>
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Muhamad Firdaus Hidayat</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php
mysql_connect("localhost","root","");
mysql_select_db("firdaus");
$menu = mysql_query("SELECT * FROM menu ORDER BY menu_id ASC");
while($dataMenu = mysql_fetch_assoc($menu)){
$menu_id = $dataMenu['menu_id'];
$submenu = mysql_query("SELECT * FROM submenu WHERE menu_id='$menu_id' ORDER BY submenu_id ASC");
if(mysql_num_rows($submenu) == 0){
echo '<li><a href="'.$dataMenu['menu_link'].'">'.$dataMenu['menu'].'</a></li>';
}else{
echo '
<li class="dropdown">
<a href="'.$dataMenu['menu_link'].'" class="dropdown-toggle" data-toggle="dropdown">'.$dataMenu['menu'].' <b class="caret"></b></a>
<ul class="dropdown-menu">';
while($dataSubmenu = mysql_fetch_assoc($submenu)){
echo '<li><a href="'.$dataSubmenu['submenu_link'].'">'.$dataSubmenu['submenu'].'</a></li>';
}
echo '
</ul>
</li>
';
}
}
?>
</ul>
</div>
</div>
</nav>
</body>
</html>
And this is index1.php
<?php
session_start();
include_once 'navbar.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login System</title>
<style>
body {
background-color:#eee;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-3"></div>
<div class="col-md-5">
<form action="inputordersample" method="post" accept-charset="utf-8">
<table class="table table-bordered">
<tr><td>Order number</td>
<td>
<div class="input-group">
<input type="text" name="no.order" required="" placeholder="Order number" autofocus="" class="form-control">
<span class="input-group-addon"><i class="fa fa-user"></i></span></div>
</td>
</tr>
<tr><td>Sample Type</td><td>
<select class="form-control" id="sel1">
<option>Sales Sample</option>
<option>Proto Sample</option>
<option>Konfirmasi</option>
<option>Revisi</option>
</select>
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>D1</td><td>
<div class="input-group">
<input type="text" name="sampled1" placeholder="D1" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Deadline</td><td>
<div class="input-group date" id="datetimepicker1">
<input type='text' name="tanggal" placeholder="Deadline" required="" class="form-control" id="tanggal"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span></div>
<script type="text/javascript">
$(document).ready(function () {
$('#tanggal').datepicker({
format: "dd-mm-yyyy",
autoclose:true
}).on('changeDate', function (ev) {
$("#berubah").html('<font color="red"><b>'+$('#tanggal').val()+'</b></font>');
});
});
</script>
</td>
</tr>
<tr><td>Article</td><td>
<div class="input-group">
<input type="text" name="Article" placeholder="Article" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Size</td><td>
<div class="input-group">
<input type="text" name="size" placeholder="Size" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Color</td><td>
<div class="input-group">
<input type="text" name="color" placeholder="Color" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Outsole</td><td>
<div class="input-group">
<input type="text" name="outsole" placeholder="Outsole" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Sum</td><td>
<div class="input-group">
<input type="text" name="sum" placeholder="Sum" required="" class="form-control">
<span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
</td>
</tr>
<tr><td>Det</td><td>
<textarea class="form-control" rows="5" id="Detail"></textarea>
</td>
</tr>
<tr><td></td><td></td></tr>
<tr><td></td><td><input type="submit" name="submit" value="Save" class="btn btn-danger"></td></tr>
</table>
</form>
</div>
<div class="col-md-3"></div>
</div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2022-08-08 06:13:20
i already fix that problem, its because jquery link is broken in navbar and must direct in index.php and not in navbar.php
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dropdown Navigation in Html5 not working properlly
unable to pass id in the dropdown menu of my navigation bar
dropdown list in navigation bar does not work and get an error
Wordpress/CSS - Submenu hover dropdown styles added to navigation bar
filament php : How to add a dropdown menu to the left side bar (navigation)
Bootstrap dropdown nav only working with current page in dynamic navigation
Laravel navigation bar not working after using a route with $id parameter?
Dropdown Navigation CSS Issue
Dropdown menu bar
Navigation bar for pages in wordpress
Related Tags