ng-include not working for angularJS - javascript

I was trying to repeat what was done in angular template at https://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templates. However, something has gone wrong and I couldn't figured out what it is.
It just looks like
menu.html
<div class="container">
<div class="row row-content" ng-controller="MenuController ">
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and index.html
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'menu.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
They are in the same folder. And I am using "''".
Thanks for the help!


Try running it on a server. It should work. Use Brackets like the instructor is doing.
The reason why you're not getting anything loaded is because you are facing an XMLHttpRequest problem, your browser cannot load cross-origin requests.

Related

Why Javascript runs only when I reload the page in Angular?

I'm using Modern Admin Bootstrap template in my Angular project and put all the files in Angular Assets.
But the javascript, hiding the side nav, maximizing the table, closing the table and etc. in Modern Admin template does not run when the component is loaded for the first time, only when I reload the page then the javascript runs. I am new in using the bootstrap template. Could you check my code.
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample project</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/mod_btsrp4/font/opensansfamly.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/vendors.min.css">
<!-- END VENDOR CSS-->
<!-- BEGIN MODERN CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/app.min.css">
<!-- END MODERN CSS-->
<!-- BEGIN Page Level CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/menu/menu-types/vertical-menu-modern.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/vendors/css/charts/jquery-jvectormap-2.0.3.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/vendors/css/charts/morris.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/colors/palette-gradient.min.css">
<!-- END Page Level CSS-->
<!-- BEGIN Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/assets/css/style.css">
<!-- END Custom CSS-->
</head>
<body class="vertical-layout vertical-menu-modern 2-columns menu-expanded fixed-navbar" data-open="click"
data-menu="vertical-menu-modern" data-col="2-columns">
<!-- BEGIN VENDOR JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/vendors.min.js"></script>
<!-- BEGIN VENDOR JS-->
<!-- BEGIN PAGE VENDOR JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/chart.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/raphael-min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/morris.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/jvector/jquery-jvectormap-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/jvector/jquery-jvectormap-world-mill.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/data/jvector/visitor-data.js"></script>
<!-- END PAGE VENDOR JS-->
<!-- BEGIN MODERN JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/core/app-menu.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/core/app.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/scripts/customizer.min.js"></script>
<!-- END MODERN JS-->
<!-- BEGIN PAGE LEVEL JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/scripts/pages/dashboard-sales.min.js"></script>
<!-- END PAGE LEVEL JS-->
<app-root></app-root>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
This is my side navigation
<!-- fixed-top-->
<nav
class="p-0 header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-semi-dark navbar-shadow">
<div class="navbar-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row position-relative">
<li class="nav-item mobile-menu d-md-none mr-auto"><a
class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i
class="ft-menu font-large-1"></i></a></li>
<li class="nav-item mr-auto"><a class="navbar-brand" href="index.html"><img class="brand-logo"
alt="modern admin logo" src="../../assets/picture/logo-black.png">
<h3 class="brand-text">Admin</h3>
</a>
</li>
<li class="nav-item d-none d-md-block nav-toggle">
<a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse">
<i class="toggle-icon ft-toggle-right font-medium-3 white" data-ticon="ft-toggle-right"></i>
</a>
</li>
</ul>
</div>
<div class="navbar-container content">
<div class="collapse navbar-collapse" id="navbar-mobile">
<ul class="nav navbar-nav mr-auto float-left">
</ul>
<ul class="nav navbar-nav float-right">
<li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link"
href="#" data-toggle="dropdown"><span class="mr-1">Hello,<span
class="user-name text-bold-700">John Doe</span></span><span
class="avatar avatar-online"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-19.png"
alt="avatar"><i></i></span></a>
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i
class="ft-user"></i> Edit Profile</a><a class="dropdown-item" href="#"><i
class="ft-mail"></i> My Inbox</a><a class="dropdown-item" href="#"><i
class="ft-check-square"></i> Task</a><a class="dropdown-item" href="#"><i
class="ft-message-square"></i> Chats</a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i
class="ft-power"></i> Logout</a>
</div>
</li>
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#"
data-toggle="dropdown"><i class="ficon ft-bell"></i><span
class="badge badge-pill badge-default badge-danger badge-default badge-up badge-glow">5</span></a>
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
<li class="dropdown-menu-header">
<h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span>
</h6><span class="notification-tag badge badge-default badge-danger float-right m-0">5
New</span>
</li>
<li class="scrollable-container media-list w-100"><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-plus-square icon-bg-circle bg-cyan"></i></div>
<div class="media-body">
<h6 class="media-heading">You have new order!</h6>
<p class="notification-text font-small-3 text-muted">Lorem ipsum dolor
sit amet, consectetuer elit.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">30 minutes
ago</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i>
</div>
<div class="media-body">
<h6 class="media-heading red darken-1">99% Server load</h6>
<p class="notification-text font-small-3 text-muted">Aliquam tincidunt
mauris eu risus.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Five hour
ago</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i>
</div>
<div class="media-body">
<h6 class="media-heading yellow darken-3">Warning notifixation</h6>
<p class="notification-text font-small-3 text-muted">Vestibulum auctor
dapibus neque.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Today</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-check-circle icon-bg-circle bg-cyan"></i></div>
<div class="media-body">
<h6 class="media-heading">Complete the task</h6><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Last week</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-file icon-bg-circle bg-teal"></i></div>
<div class="media-body">
<h6 class="media-heading">Generate monthly report</h6><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Last month</time></small>
</div>
</div>
</a></li>
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all notifications</a></li>
</ul>
</li>
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#"
data-toggle="dropdown"><i class="ficon ft-mail"> </i></a>
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
<li class="dropdown-menu-header">
<h6 class="dropdown-header m-0"><span class="grey darken-2">Messages</span></h6>
<span class="notification-tag badge badge-default badge-warning float-right m-0">4
New</span>
</li>
<li class="scrollable-container media-list w-100"><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-online rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-19.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Margaret Govan</h6>
<p class="notification-text font-small-3 text-muted">I like your
portfolio, let's start.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Today</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-busy rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-2.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Bret Lezama</h6>
<p class="notification-text font-small-3 text-muted">I have seen your
work, there is</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Tuesday</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-online rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-3.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Carie Berra</h6>
<p class="notification-text font-small-3 text-muted">Can we have call in
this week ?</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Friday</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-away rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-6.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Eric Alsobrook</h6>
<p class="notification-text font-small-3 text-muted">We have project
party this saturday.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">last month</time></small>
</div>
</div>
</a></li>
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all messages</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div class="main-menu-content">
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li class=" nav-item">
<a routerLink="/dashboard/user-account">
<i class="la la-user"></i>
<span class="menu-title"> Admin account </span>
</a>
<ul class="menu-content"></ul>
</li>
<li class=" nav-item">
<a routerLink="/dashboard/tapload-account">
<i class="la la-credit-card"></i>
<span class="menu-title"> Tapload account </span>
</a>
<ul class="menu-content"></ul>
</li>
</ul>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="app-content content">
<router-outlet></router-outlet>
</div>
Some data were remove because of the limit. Thank you in advance

Bootstrap 5 navbar dropdown links don't work on small screens <576px

I'm new to this. I have a working navbar with dropdown that has 3 links. After expansion, the dropdown links display a card upon clicking (cards show contact info), and all works fine...except for when I go to mobile view below <576px.
I've used a template with CDNs directly from Boostrap for CSS, Javascript bundle, and Icons.
Why does this work, but it becomes not responsive once below <576px ????
Soon as I go greater than >576px it works again. This is driving me nuts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<style>
.bg-dark-transparent {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<title>Bio Website</title>
</head>
<body class="vh-100 bg-dark text-light">
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<span class="badge bg-danger shadow">Joe Noobie</span>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMain"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="z-index: 10">
<li class="nav-item">
<a
href=""
class="nav-link active"
data-bs-toggle="collapse"
data-bs-target=".multi-collapse"
aria-expanded="false"
aria-controls="about contact"
>Info</a
>
</li>
<li class="nav-item">
<a
href="#about"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="about"
>About</a
>
</li>
<li class="nav-item">
<a
href="#contact"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="contact"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- HEADER -->
<header class="container fixed-top text-end mt-5">
<!-- HEADER > About & Contact dropdown content -->
<div class="row mt-3">
<!-- About -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="about">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">About</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Joe Noobie</h3>
<ul class="list-unstyled ms-5">
<li>CEO of Noobie Media</li>
<li>Web Developer</li>
<li>Tech Support</li>
<li>Graphic Designer</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="contact">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">Contact</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Get in touch:</h3>
<ul class="list-unstyled ms-5">
<li><i class="bi bi-house me-2 text-danger"></i>City: The City</li>
<li><i class="bi bi-signpost me-2 text-danger"></i>Street: 21 Jump Str.</li>
<li><i class="bi bi-telephone me-2 text-danger"></i>Phone: +555-555-555</li>
<li>
<i class="bi bi-envelope me-2 text-danger"></i>Email: JoeNoobie#Noobalicious.com
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>

Remove the "fixed-top" class from nav and header tags, removing this class makes the tags rendered one-after the other in the default "static" positioning way.
<nav class="navbar navbar-expand-md navbar-dark">
<header class="container text-end mt-5">

dynamic creation of table and how to insert data

how to create a table and insert the column and row values in Oracle database which are dynamically given by the user from a JSP page and we have developed a jsp which shows add a column and add row can be incremented as per the user requirement and that same input data can be inserted in the database. can anyone please help me out this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
<style>
#rom{
display:none;
}
</style>
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<h2 ><p class="small" style="color:red;">Employee list</p></h2>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<div class="dropdown-divider"></div>
<a class="nav-link" href="employeeHome.html">
<i class="fa fa-home"></i>
<span class="nav-link-text" style="color:#60b5ff"><b>Home</b></span>
</a>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="employeeEditProfile.html">
<i class="fa fa-fw fa-user"></i>
<span class="nav-link-text">Edit Profile</span>
</a>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-file-text"></i>
<span class="nav-link-text">Tickets</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
Add Ticket
</li>
<li>
Edit Ticket
</li>
<li>
View Tickets
</li>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Test Management</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
Prepare Test Report
</li>
<li>
Prepare Test Data
</li>
<li>
Prepare Bug Report
</li>
<li>
View Test Report
</li>
<li>
Modify Test Report
</li>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-bell"></i>
<span class="nav-link-text">Notifications</span>
</a>
</li>
<div class="dropdown-divider"></div>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">Tables</li>
</ol>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Test Data</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="tb" width="100%" cellspacing="0">
<thead class="thead-dark">
<tr id="myRow">
<th>Type of Testing</th>
</tr>
</thead>
<tr>
<form>
<td id="sel"><select class="form-control" id="sel1">
<option select disabled>Test Result</option>
<option>Positive</option>
<option>Negative</option>
</select>
</form>
</tr>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<div align="center">
<button onclick="addColumn('tb')" class="btn btn-info" id="addColumn">Add Column</button>
<button id="addMores" class="btn btn-info">Add Row</button>
<div id="rom">
<input class="form-control" type="text" name="val" id="for" >
</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function addColumn(tb)
{
var tbHeadObj = document.getElementById(tb).tHead;
for (var h=0; h<tbHeadObj.rows.length; h++) {
var newTH = document.createElement('th');
var x=document.getElementById('rom').innerHTML;
newTH.innerHTML=x;
tbHeadObj.rows[h].appendChild(newTH);
}
var tbBodyObj = document.getElementById(tb).tBodies[0];
for (var i=0; i<tbBodyObj.rows.length; i++) {
var newCell = tbBodyObj.rows[i].insertCell(-1);
var x=document.getElementById('rom').innerHTML;
newCell.innerHTML = x;
}
}
function deleteColumn(tblId)
{
var allRows = document.getElementById(tblId).rows;
for (var i=0; i<allRows.length; i++) {
if (allRows[i].cells.length > 1) {
allRows[i].deleteCell(-1);
}
}
}</script>
<script>
$(function(){
$('#addMores').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click','.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Custom scripts for this page-->
<script src="js/sb-admin-datatables.min.js"></script>
</div>
</body>
</html>

Navbar collapse button (three bars) not working when screen too small

My nav bar in Bootstrap does not come down when the screen gets too small. On mobile, for example, it doesn't work unless the phone is in landscape mode. Here is my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
I'm not too familiar with Bootstrap, so I can't tell if there's something glaringly obvious I'm doing wrong. Is there any reason why the collapse button would not drop-down after the screen gets too small?
<!DOCTYPE html>
<html lang="en">
<head>
<title> My site! </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
<script src="js/index.js"></script>
<!-- Typing effect on homepage is in js/typed.js -->
<script src="js/typed.js"></script>
<link rel="stylessheet" type="text/css" href="bootstrap-social-gh-pages/bootstrap-social.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center push-center" >
<div style="background:transparent !important" class="jumbotron">
<h1 id="main">Hi there</h1>
<p> <i class="fa fa-globe" aria-hidden="true"></i> <span class="element"></span> </p>
<p> <i class="fa fa-briefcase" aria-hidden="true"></i> <span class="element1"></span> </p>
<p> <span class="element2"> </span> <span class="rest"></span> </p>
</div>
</div>
</body>
</html>

TypeError: $element.epoch is not a function

I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">

As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>

Categories

Resources