I am trying to integrate my django app with a admin dashboard from github. I can see after my successful log in the app get directed to dashboard but only the HTML part is loading i can't see any fancy things getting added to my dashboard
.
It should have been looking like the one screenshot given in github link. I am not a regular frontend developer so it's getting hard for me figure out where the mistake is.
Dashboard.html
<!doctype html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Light Bootstrap Dashboard by Creative Tim</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}" type='text/css' />
<!-- Animation library for notifications -->
<!--<link href="assets/css/animate.min.css" rel="stylesheet"/>-->
<link rel='stylesheet' href="{% static 'css/animate.min.css' %}" type='text/css' />
<!-- Light Bootstrap Table core CSS -->
<!--<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>-->
<link rel='stylesheet' href="{% static 'css/animate.min.css' %}" type='text/css' />
<!-- CSS for Demo Purpose, don't include it in your project -->
<!--<link href="assets/css/demo.css" rel="stylesheet" />-->
<link rel='stylesheet' href="{% static 'css/demo.css' %}" type='text/css' />
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--<link rel='stylesheet' href="{% static 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' %}" type='text/css' />-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<!--<link rel='stylesheet' href="{% static 'http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' %}" type='text/css' />-->
<!--<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />-->
<!--<link rel='stylesheet' href="{% static 'css/pe-icon-7-stroke.css' %}" type='text/css' />-->
<link rel='stylesheet' href="{% static 'css/pe-icon-7-stroke.css' %}" type='text/css' />
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="purple" data-image="img/sidebar-5.jpg">
<!--
Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
Tip 2: you can also add an image using data-image tag
-->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text">
Creative Tim
</a>
</div>
<ul class="nav">
<li class="active">
<a href="dashboard.html">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.html">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li>
<a href="table.html">
<i class="pe-7s-note2"></i>
<p>Table List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="pe-7s-news-paper"></i>
<p>Typography</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="pe-7s-science"></i>
<p>Icons</p>
</a>
</li>
<li>
<a href="maps.html">
<i class="pe-7s-map-marker"></i>
<p>Maps</p>
</a>
</li>
<li>
<a href="notifications.html">
<i class="pe-7s-bell"></i>
<p>Notifications</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<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="#">Dashboard</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret hidden-lg hidden-md"></b>
<p class="hidden-lg hidden-md">
5 Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
<p class="hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
<p>Account</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<p>
Dropdown
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg"></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="header">
<h4 class="title">Email Statistics</h4>
<p class="category">Last Campaign Performance</p>
</div>
<div class="content">
<div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>
<div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Bounce
<i class="fa fa-circle text-warning"></i> Unsubscribe
</div>
<hr>
<div class="stats">
<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="header">
<h4 class="title">Users Behavior</h4>
<p class="category">24 Hours performance</p>
</div>
<div class="content">
<div id="chartHours" class="ct-chart"></div>
<div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Click
<i class="fa fa-circle text-warning"></i> Click Second Time
</div>
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card ">
<div class="header">
<h4 class="title">2014 Sales</h4>
<p class="category">All products including Taxes</p>
</div>
<div class="content">
<div id="chartActivity" class="ct-chart"></div>
<div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Tesla Model S
<i class="fa fa-circle text-danger"></i> BMW 5 Series
</div>
<hr>
<div class="stats">
<i class="fa fa-check"></i> Data information certified
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card ">
<div class="header">
<h4 class="title">Tasks</h4>
<p class="category">Backend development</p>
</div>
<div class="content">
<div class="table-full-width">
<table class="table">
<tbody>
<tr>
<td>
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1"></label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox2" type="checkbox" checked>
<label for="checkbox2"></label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3"></label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox4" type="checkbox" checked>
<label for="checkbox4"></label>
</div>
</td>
<td>Create 4 Invisible User Experiences you Never Knew About</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox5" type="checkbox">
<label for="checkbox5"></label>
</div>
</td>
<td>Read "Following makes Medium better"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox6" type="checkbox" checked>
<label for="checkbox6"></label>
</div>
</td>
<td>Unfollow 5 enemies from twitter</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> Creative Tim, made with love for a better web
</p>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="{% static 'js/jquery.3.2.1.min.js' %}"></script>
<!--<script src="assets/js/jquery.3.2.1.min.js" type="text/javascript"></script>-->
<!--<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>-->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- Charts Plugin -->
<!--<script src="assets/js/chartist.min.js"></script>-->
<script src="{% static 'js/chartist.min.js' %}"></script>
<!-- Notifications Plugin -->
<!--<script src="assets/js/bootstrap-notify.js"></script>-->
<script src="{% static 'js/bootstrap-notify.js' %}"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<!--<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>-->
<!--<script src="{% static 'js/light-bootstrap-dashboard.js?v=1.4.0' %}"></script>-->
<!--<script src="{% static 'js/light-bootstrap-dashboard.js?v=1.4.0' %}"></script>-->
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<!--<script src="assets/js/demo.js"></script>-->
<script src="{% static 'js/demo.js' %}"></script>
<script type="text/javascript">
$(document).ready(function(){
demo.initChartist();
$.notify({
icon: 'pe-7s-gift',
message: "Welcome to <b>Light Bootstrap Dashboard</b> - a beautiful freebie for every web developer."
},{
type: 'info',
timer: 4000
});
});
</script>
</html>
All my media content is present in static folder as i ran collect static and running my localhost i can see 200 response for all my css ,etc.
My Debug points:
I can see it is possibly not working starting from the div class.
Note
I can paste the code from other files as per requirements here
Edit1: Adding the output from console
Edit2 : Adding demo.js file ,it is showing debounce is not defined. pfa the second last screenshot
Adding settings.py
Settings.py
import os
import warnings
from django.utils.translation import ugettext_lazy as _
from os.path import dirname
warnings.simplefilter('error', DeprecationWarning)
BASE_DIR = dirname(dirname(dirname(dirname(os.path.abspath(__file__)))))
CONTENT_DIR = os.path.join(BASE_DIR, 'content')
SECRET_KEY = 'NhfTvayqggTBPswCXXhWaN69HuglgZIkM'
DEBUG = True
ALLOWED_HOSTS = []
SITE_ID = 1
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
# Vendor apps
'bootstrap4',
# Application apps
'main',
'accounts',
'dashboard',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'app.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(CONTENT_DIR, 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'app.wsgi.application'
EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'
EMAIL_FILE_PATH = os.path.join(CONTENT_DIR, 'tmp/emails')
EMAIL_HOST_USER = 'kmickey34#yahoo.com'
DEFAULT_FROM_EMAIL = 'test#example.com'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'test',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost',
'PORT': '5432',
}
}
#STATIC_ROOT = os.path.join(CONTENT_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(CONTENT_DIR, 'media')
MEDIA_URL = '/media/'
STATICFILES_DIRS = [
os.path.join(CONTENT_DIR, "static"),
]
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag to build the URL for the given relative
path using the configured STATICFILES_STORAGE.
example:
{% load static %}
Related
I am making some mapping with moviedb api using innerhtml, the problem i am having is with the Main.appendChild where the appendChild is handle as a property and not as a function. I am having the same issue in the console with the entire main array and i think it might having something to do with the fact that i am declering the main object to a htmlelemnt then to a array. Btw i have given up on this project hence it wasnt worth the extra time that it took
this is kinda of a filler part so excuse me pls.
const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const main = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url).then(res => res.json())
.then(data => {
console.log(data.results);
showMovies(data.results);
})
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach(main => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
main.appendChild(movieEl);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="img/favicon.png" />
<title>Movies - Get Booked Online</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" /></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"
><i class="fas fa-home"></i> Home</a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-film"></i> Movies</a>
</li>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
><i class="fas fa-crown"></i> Genre</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adventure</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Animation</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
</div>
</li>
</ul>
<a class="nav-button" href="movies.html"
><i class="fas fa-newspaper"></i> Latest Movies</a
>
</div>
</nav>
<!-- breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Movies</li>
</ol>
</nav>
<!-- /breadcrumbs -->
<!-- movie cards -->
<div class="container">
<div class="alert alert-primary" role="alert">
<i class="fas fa-exclamation-circle"></i> The following movies are
currently in theaters.
</div>
<main id ="main">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Avengers: Infinity War</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
As the Avengers and their allies have continued to protect the
world from threats too large for any one hero to handle, a new
danger has emerged from the cosmic shadows: Thanos.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Deadpool 2
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.3</a
>
</span>
<p>
Wisecracking mercenary Deadpool battles the evil and powerful
Cable and other bad guys to save a boy's life.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Black Panther
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 7.6</a
>
</span>
<p>
King T'Challa returns home from America to the reclusive,
technologically advanced African nation of Wakanda to serve as
his country's new leader. However, T'Challa soon finds that he
is challenged for the throne by factions within his own country
as well as without.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>Fifty Shades Freed</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 4.4</a
>
</span>
<p>
A young Silicon Valley tech-titan enlists a veteran surgeon with
a controversial past in starting a hospital with a cutting-edge,
new school approach to medicine.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Red Sparrow
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="single-movie.html" class="list-meta-item"
><i class="fas fa-star"></i> 6.7</a
>
</span>
<p>
Prima ballerina, Dominika Egorova faces a bleak and uncertain
future after she suffers an injury that ends her career. She
soon turns to Sparrow School, a secret intelligence service that
trains exceptional young people to use their minds and bodies as
weapons.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Rampage
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.4</a
>
</span>
<p>
Primatologist Davis Okoye shares an unshakable bond with George,
the extraordinarily intelligent, silverback gorilla who has been
in his care since birth. But a rogue genetic experiment gone
awry mutates this gentle ape into a raging creature of enormous
size.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Ready Player One</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
When the creator of a popular video game system dies, a virtual
contest is created to compete for his fortune.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Game Night
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.2</a
>
</span>
<p>
Max and Annie's weekly game night gets kicked up a notch when
Max's brother Brooks arranges a murder mystery party -- complete
with fake thugs and federal agents. So when Brooks gets
kidnapped, it's all supposed to be part of the game.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /movie cards -->
<br />
<!-- Newsletter -->
<!-- /Newsletter -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
About us
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Refunds
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Terms and Privacy
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Contact
</li>
</ul>
<p class="small mb-4 mb-lg-0">
Omar Ahmad© 2018. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="https://linkedin.com/in/byalk" class="footer-fb">
<i class="fab fa-linkedin fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#" class="footer-tw">
<i class="fab fa-twitter fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="footer-in">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
You have two variables named 'main', one is the getElementById and the other is from the forEach loop. Change one and it should work
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const mainEl = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data.results);
showMovies(data.results);
});
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach((main) => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
mainEl.appendChild(movieEl);
});
}
Sandbox Code
In the forEach loop you are declaring each array item as ‘main’.
Therefore main.appendChild() is called upon the array item, not on the HTML element.
Change the item name in the forEach loop to something like ‘movie’, and then ofcourse also in the first line of the loop.
**Hi, I am trying to display a dashboard view with Codeigniter, but when I load, some of the design such as the design of header and containers are missing here is my code, I'm new in this filed, can someone please help me? what am I missing? there is no error but I'm getting a warning: DevTools failed to load SourceMap: Could not load content for http://localhost:8080/ASGB/assets/js/bootstrap.min.js.map: **
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASGB Ticketing Tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="<?php echo site_url ('assets/image/favicon.png');?>"/>
<link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css.map');?>">
<link rel="stylesheet" href="<?php echo site_url ('assets/css/mystyle.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/datatables.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/bootstrap-multiselect.css');?>">
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-cus navbar-light bg-faded">
<a class="navbar-brand waves-light" href="#">
<img src="<?php echo site_url ('assets/image/logo.png');?>" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mob-bar" id="navbarNav">
<ul class="nav navbar-nav ml-auto nav-head-font">
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
<li class="nav-item dropdown dropdown-mob" id="dropdown-mob-hide">
<i class="fa fa-user" aria-hidden="true"></i>
<div class="dropdown-menu dropdown-menu-right">
<i class="fa fa-address-book-o" aria-hidden="true"></i>My Profile
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit Profile
<i class="fa fa-key" aria-hidden="true"></i>Change Password
<i class="fa fa-handshake-o" aria-hidden="true"></i>Account Ledger
<div class="dropdown-divider"></div>
<i class="fa fa-sign-out" aria-hidden="true"></i>Sign Out
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid container-fluid-cus">
<div class="fixed-nav">
<div class="fixed-nav-inner open-nav">
<ul class="text-center">
<a href="home.html" id="menu-toggle" class="waves-light menu-toggle" data-toggle="offcanvas">
<li>
<i class="fa fa-dashboard"></i></li>
<li>Menu</li>
</a>
<a href="company.html" class="waves-light">
<li><i class="fa fa-briefcase"></i></li>
<li>Company</li>
</a>
<a href="staff.html" class="waves-light">
<li><i class="fa fa-user-circle"></i></li>
<li>Staff</li>
</a>
<a href="projects.html" class="waves-light">
<li><i class="fa fa-product-hunt"></i></li>
<li>Projects</li>
</a>
<a href="#" class="waves-light">
<li><i class="fa fa-ticket"></i></li>
<li>Incidents</li>
</a>
<a href="settings.html" class="waves-light">
<li><i class="fa fa-cogs"></i></li>
<li>Settings</li>
</a>
</ul>
</div>
</div>
</div>
<div class="main-sec">
<div class="">
<div class="row">
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="mr-3 card-icon-1">
<i class="fa fa-newspaper-o font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">06</h3>
<span>Projects</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-2 mr-3 card-icon-1">
<i class="fa fa-users font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">72</h3>
<span>Staff</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-3 mr-3 card-icon-1">
<i class="fa fa-universal-access font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">10</h3>
<span>Teams</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-4 mr-3 card-icon-1">
<i class="fa fa-user-circle font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">5</h3>
<span>Clients</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo site_url ('assets/js/jquery.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/popper.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/datatables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/bootstrap-multiselect.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.steps.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.validate.js');?>"></script>
<script src="<?php echo site_url('assets/js/myscript.js');?>"></script>
</body>
</html>
“Could not load content for ... *.map” is a Google Chrome setting issue.
View your website in Chrome
Press F12 to launch Google DevTools
Click the Setting gear icon (top right)
See ... Preferences -> Sources section
uncheck [ ] Enable CSS source maps
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>
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.
in my application when user update or insert any data that time if return value is 1 then it displays a bootstrap success alert. but it appears at the end of the page and i want it at middle of the page or at the div box footer. here is my code for that page.
ClassConnection.php :
<?php
class connection
{
Public $ServerName="localhost";
Public $ServerUser="root";
Public $ServerPassword="";
Public $DatabaseName="taksicab";
public $mycon=" ";
public $rs = " " ;
public $sql= " ";
public $myquery = " ";
function open_connection()
{
$con=mysql_connect($this->ServerName, $this->ServerUser, $this->ServerPassword);
if(!$con)
{
die("Error in connection .......");
}
else
{
$this->mycon=$con;
return $this->mycon;
}
}
function SelectDB()
{
mysql_select_db($this->DatabaseName);
}
//DBOperations
function DBOperation ($mTable,$mFields,$mValues,$mOperation)
{
$mSQL="";
$mStr="";
$tFields = explode(",",$mFields);
$tValues = explode(",",$mValues);
if($mOperation == "Insert")
{
$mSQL = "Insert into " . $mTable . "( " . $mFields . ") values ( " . $mValues . ")";
$query = mysql_query($mSQL);
}
else if($mOperation == "Update")
{
for($i=0; $i<count($tFields); $i++)
{
if($i== (count($tFields)-1))
{
$mStr = $mStr . " " . $tFields[$i] . " = " . $tValues[$i];
}
else
{
$mStr=$mStr . " " . $tFields[$i] . " = " . $tValues[$i] . " , ";
}
}
$mSQL = "Update " . $mTable . " set " . $mStr . " Where " . $tFields[0] . " = " . $tValues[0];
$query = mysql_query($mSQL);
}
else if($mOperation == "Delete")
{
$mSQL = "Delete from " . $mTable . " Where " . $tFields[0] . " = " . $tValues[0];
}
// echo $mSQL;
$this->myquery = $query ;
return $this->myquery;
}
}
?>
Block_User.php
<?php
include("ClassConnection.php");
$mcon=new connection();
$mcon->open_connection();
$mcon->SelectDB();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Block User | Admin Taksi</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum- scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="../dist/css/skins/skin-blue.min.css">
<!-- HTML5 Shim and Respond.js 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.3/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b> Taksi</span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">Ravi Barot</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Ravi Barot - Web Developer
<small>Tarinee since May. 2016</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel">
<div class="pull-left image">
<img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Ravi Barot</p>
<!-- Status -->
</div>
</div>
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">Main Menu</li>
<!-- Optionally, you can add icons to the links -->
<li>
<a href="dashboard.php">
<i class="fa fa-fw fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="treeview">
<li class="active">
<a href="#">
<i class="fa fa-fw fa-users"></i>
<span>Manage Users</span>
</a>
<ul class="treeview-menu">
<li class="active">
<a href="block_user.php">
<i class="fa fa-fw fa-circle-o"></i>
Block User
</a>
</li>
<li>
<a href="obsulate_user.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate User
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-cab"></i>
<span>Manage Cabs</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_cab.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Cab
</a>
</li>
<li>
<a href="obsulate_cab.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Cab
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-user"></i>
<span>Manage Driver</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_driver.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Driver
</a>
</li>
<li>
<a href="obsulate_driver.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Driver
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-star-half-full"></i>
<span>Manage Cab Category</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_cab_category.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Cab Category
</a>
</li>
<li>
<a href="obsulate_cab_category.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Cab Category
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-road"></i>
<span>Manage Route</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_source_place.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Source Place
</a>
</li>
<li>
<a href="obsulate_source_place.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Source Place
</a>
</li>
<li>
<a href="add_desti_place.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Destination Place
</a>
</li>
<li>
<a href="obsulate_desti_place.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Destination Place
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-arrows-h"></i>
<span>Manage Route Distance</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_distance.php">
<i class="fa fa-fw fa-circle-o"></i>
Add Route Distance
</a>
</li>
<li>
<a href="update_distance.php">
<i class="fa fa-fw fa-circle-o"></i>
Update Route Distance
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-fw fa-rupee"></i>
<span>Manage Fare</span>
</a>
<ul class="treeview-menu">
<li>
<a href="add_new_fair.php">
<i class="fa fa-fw fa-circle-o"></i>
Add New Fare
</a>
</li>
<li>
<a href="obsulate_fair.php">
<i class="fa fa-fw fa-circle-o"></i>
Obsulate Current Fare
</a>
</li>
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Manage User
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Block User</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form class="form-horizontal" method="POST">
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">User Email ID</label>
<div class="col-xs-5">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="user_email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Block Reason </label>
<div class="col-xs-5">
<input type="text" class="form-control" id="inputPassword3" placeholder="Reason for Blocking" name="block_reason">
</div>
</div>
<!-- select -->
<div class="form-group">
<label for="form-control" class="col-sm-2 control-label">Block Peroid</label>
<div class="col-xs-5">
<select class="form-control" name="block_period">
<option value="1 week">1 Week</option>
<option value="1 month">1 Month</option>
<option value="permenent">Permenent</option>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-info pull-left" name="block_user">Block User</button>
</div>
<!-- /.box-footer -->
</form>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">All rights reserved
</div><strong>Copyright © 2016 Parshwa Technology</strong>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"> <i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.0 -->
<script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. Slimscroll is required when using the
fixed layout. -->
</body>
</html>
<?php
if(isset($_POST["block_user"]))
{
$mTable = "blocked_user_master";
$mFields = "User_Email,Block_Reason,Block_Period";
$mValues = "'".$_POST['user_email']. "','" . $_POST['block_reason'] . "','" . $_POST['block_period'] . "'";
$mOperation = "Insert";
$r = $mcon->DBOperation($mTable,$mFields,$mValues,$mOperation);
$mTable1 = "user_master";
$mFields1 = "User_Email,Blocked";
$mValues1 = "'" . $_POST['user_email'] ."',1";
$mOperation1 = "Update";
$r1 = $mcon->DBOperation($mTable1,$mFields1,$mValues1,$mOperation1);
// echo $r.$r1;
if($r1 && $r == 1)
{
echo "<div class='alert alert-success alert-dismissible col-xs-5'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-check'></i> Alert!</h4>
Success...
</div> ";
}
}
?>
You can do that with fancy javascript which will move div box with output message into wherever you like.
But that's only dirty hack, not the proper way to code.
The proper way is to divide operation and display (at least, MVC is even better).
This way you can set some variable indicating name was changes and generate a page from template based on that variable (ie with success msg set on top of page if there is one).
Please don't make your own template engine. Use some existing ones instead (Savant is quite easy to learn).
Edit:
Ok, I won't give you ready-to-use code, instead I will tell you how to do it the quick-but-dirty way:
1) create a div in which you want your message to appear, place it wherever you want it to be and give it some id (unique in page scope) ie:
<div id="resultMsg"></div>
2) later in your php code: instead of printing div with a message, print some javascript which will fill your resultMsg container with a message:
echo '<script type="text/javascript">document.getElementById("resultMsg").innerHTML = "put your generated message here";</script>';
It's quick fix but don't get used to it. Instead learn how to do this the right way. You can start with https://github.com/phplucidframe/phplucidframe/wiki/Integration-of-Savant,-The-Simple-Template-System or use other templating system. It will save you many bigger problems than this one in future :)