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 :)
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.
I am new to java and stuck in trying to embed the HTML/CSS and Javascript to the java code.
Any pointers will be helpful to finish building my code. I am using Eclipse editor to write my java code.
I have been able to successfully display some part of HTML display in my java code as below however I am trying to achieve a table sort via html/css/javascript and would like to add that too to my java code.
Below is my display.java file
public void transformForRequestSuccessful(MarkupOutput out) {
//Call render methods
renderdisplay(out);
}
public void renderdisplay(MarkupOutput out)
{
out.append("<BR/>");
out.append("<p>Look at the body!</p>");
out.append("<BR/>");
}
Below is the HTML/CSS/JavaScript that can be pasted as is and runs fine.
I saved this HTML file as sort.html and when called independently works fine.
html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Windows-1252">
<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order
(asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 *
asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid black;
padding: 4px 16px;
font-family: Times New Roman;
font-size: 15px;
text-align: left;
}
th {
background-color: #C8C8C8;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1;
asc3 = 1;">ServerName</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1;
asc1 = 1;">UserName</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1;
asc2 = 1;">JobId</th>
</tr>
</thead>
<tbody id="people">
<tr>
<td>Server1</td>
<td>ABC</td>
<td>18</td>
</tr>
<tr>
<td>Server2</td>
<td>XYZ</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
Any help or suggestions how to embed this in java code will be helpful.
My apologies if I sound naive or unaware of the basic java programming.
Thanks
I would use the following frameworks:
Spring IO: https://spring.io/guides/gs/spring-boot/
This example shows you how to create the server and store your HTML/CSS/JavaScript. On the other hand, create a REST service to create a response with your embed HTML code.
JQuery: https://spring.io/guides/gs/consuming-rest-jquery/
This example shows you how to consume a RESTful Web Service with jQuery and append the embed code
In order to escape the special characters you need to integrate the OWASP encoder to encode the data for JS or CSS. Please refer to this link
Although it will not work alone but hope this will help you out to understand the implementation. This is a sample JSP file. In JSP file you can embed java code in the form of tags (scriplet,declarative and expression).
<!DOCTYPE html>
<%#page import="com.demo.dto.RegisterDTO"%>
<%#page import="java.util.ArrayList"%>
<%#page import="com.model.Student"%>
<%#page import="java.util.List"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title>
<!-- Core CSS - Include with every page -->
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/main-style.css" rel="stylesheet" />
<!-- Page-Level CSS -->
<link href="assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<%List<RegisterDTO> entity = (List<RegisterDTO>)(request.getAttribute("entity")); %>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- navbar top -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<!-- navbar-header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<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="index.html">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<!-- end navbar-header -->
<!-- navbar-top-links -->
<ul class="nav navbar-top-links navbar-right">
<!-- main dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-danger">3</span><i class="fa fa-envelope fa-3x"></i>
</a>
<!-- dropdown-messages -->
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong><span class=" label label-danger">Andrew Smith</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-info">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-success">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-messages -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-success">4</span> <i class="fa fa-tasks fa-3x"></i>
</a>
<!-- dropdown tasks -->
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-tasks -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-warning">5</span> <i class="fa fa-bell fa-3x"></i>
</a>
<!-- dropdown alerts-->
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i>New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i>3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i>Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i>New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i>Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-alerts -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-3x"></i>
</a>
<!-- dropdown user-->
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i>User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i>Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout
</li>
</ul>
<!-- end dropdown-user -->
</li>
<!-- end main dropdown -->
</ul>
<!-- end navbar-top-links -->
</nav>
<!-- end navbar top -->
<!-- navbar side -->
<nav class="navbar-default navbar-static-side" role="navigation">
<!-- sidebar-collapse -->
<div class="sidebar-collapse">
<!-- side-menu -->
<ul class="nav" id="side-menu">
<li>
<!-- user image section-->
<div class="user-section">
<div class="user-section-inner">
<img src="assets/img/user.jpg" alt="">
</div>
<div class="user-info">
<div>Jonny <strong>Deen</strong></div>
<div class="user-text-online">
<span class="user-circle-online btn btn-success btn-circle "></span> Online
</div>
</div>
</div>
<!--end user image section-->
</li>
<li class="sidebar-search">
<!-- search section-->
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!--end search section-->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li class="selected">
<i class="fa fa-dashboard fa-fw"></i>Manage Users
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i>Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris Charts
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-flask fa-fw"></i>Timeline
</li>
<li class="selected">
<i class="fa fa-table fa-fw"></i>Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i>Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i>UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Grid
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i>Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- third-level-items -->
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i>Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- second-level-items -->
</li>
</ul>
<!-- end side-menu -->
</div>
<!-- end sidebar-collapse -->
</nav>
<!-- end navbar side -->
<!-- page-wrapper -->
<div id="page-wrapper">
<div class="row">
<!-- page header -->
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- end page header -->
</div>
<div class="row">
<form method="post" action="MyServlet">
<input type="hidden" value=1 name="userAction"/>
<input type="submit" name="showData" value="showData"/>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Kitchen Sink -->
<div class="panel panel-default">
<div class="panel-heading">
User Details
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<% if(entity != null){
for(RegisterDTO data:entity){ %>
<tr>
<td><%=data.getId() %></td>
<td><%=data.getFirstName() %></td>
<td><%=data.getLastName() %></td>
<td><%=data.getContact() %></td>
<td><%=data.getEmail() %></td>
</tr>
<% }
}%>
</tbody>
</table>
</div>
</div>
</div>
<!-- End Kitchen Sink -->
</div>
</div>
</div>
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/plugins/pace/pace.js"></script>
<script src="assets/scripts/siminta.js"></script>
<!-- Page-Level Plugin Scripts-->
<script src="assets/plugins/dataTables/jquery.dataTables.js"></script>
<script src="assets/plugins/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
</body>
</html>
In this, I also made a dynamic table using scriplet tag.
If you're new, you're going to be exposed to many different approaches to accomplishing the same thing - how to get your Java code to work with other web technologies. IMO, Spring Boot is one of the quickest ways to get started, as #pakOverflow mentions above.
Another great (and simple) intro is from MyKong: https://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/
One (of the many) thing to keep in mind is that you want to separate concerns (see https://en.wikipedia.org/wiki/Separation_of_concerns). In Java, strive to have fairly small, simple objects work together to do interesting things rather than putting all your code in a very small number of classes that do everything.
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 a sidebar is there and it toggles when we click on it.Also I want to hide and show some table data but when I add code for this the sidebar doesnot toggle.May I know why this happened.
I want to hide table columns but when I did this my sidebar dropdown stops working.
This code is for sidebar toggle is working fine.
function goToUrl(id)
{
if(user_type_id!=3)
{
if(id==0)
{
$('.hideAndShow').toggle();
document.location="Doctor";//News
}
else
if(id==1)
{
$('.hideAndShow').toggle();
document.location="Device";//cases
}
if(id==2)
{
// $('#addJournals').toggle();
// $('#listingJournals').toggle();
$('.hideAndShow').toggle();
document.location="Associate";//journal
}
if(id==3)
{
$('.hideAndShow').toggle();
document.location="Patient";//gallery
}
}
else
{
if(id==0)
document.location="Doctor";
else
if(id==1)
document.location="Device";
if(id==2)
document.location="Associate";
else
if(id==3)
document.location="Patient";
}
}
<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p id="imageAdmin"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div> -->
<ul class="sidebar-menu">
<!-- <li id='dashboard'>
<a href="/dashboard">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li> -->
<li class='treeview' id='Doctor'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-stethoscope"></i>
<span onclick="goToUrl(0)">Manage Doctor</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDoctor?id=0" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/doctor?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='treeview' id='Device'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-mobile"></i>
<span onclick="goToUrl(1)">Manage Device</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDevice" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/device?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='active' id='Report'>
<a href="/reports">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-list-alt"></i>
<span>Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
but when i add following code sidebar not toggle
$(document).ready(function(){
$("#hi").click(function(){
// $("p").hide();
$('td:nth-child(3)').hide();
});
$("#sh").click(function(){
// $("p").show();
$('td:nth-child(3)').show();
});
});
please help me.
I want to insert several pagination function in one page using laravel pagination and bootstrap tab, but it doesn't work well, so I found something in Internet that say I need to use ajax to make it but I think there are some missing with my code because the component inside my tab is doesn't show. Here I provide my code:
View
<script>
$(document).ready(function(){
$("#f1").load("http://localhost/laravel/public/adminpanel/ajax/apu");
$("#f2").load("http://localhost/laravel/public/adminpanel/ajax/aps");
$("#f3").load("http://localhost/laravel/public/adminpanel/ajax/app");
});
</script>
<div id="tf-header">
<div class="container"> <!-- container -->
<center><h1>Panel Administrator</h1></center>
</div><!-- end container -->
</div>
<div id="tf-features">
<div class="container"> <!-- container -->
<div class="col-md-4"> <!-- tab menu col 4 -->
<ul class="features nav nav-pills nav-stacked" role="tablist">
<li role="presentation"> <!-- feature tab menu #1 -->
<a href="#f1" aria-controls="f1" role="tab" data-toggle="tab">
<i class="fa fa-user fa-2x fa-fw"></i>
Anggota
</a>
</li>
<li role="presentation"> <!-- feature tab menu #2 -->
<a href="#f2" aria-controls="f2" role="tab" data-toggle="tab">
<i class="fa fa-building fa-2x fa-fw"></i>
Sekolah
</a>
</li>
<li role="presentation"> <!-- feature tab menu #3 -->
<a href="#f3" aria-controls="f3" role="tab" data-toggle="tab">
<i class="fa fa-briefcase fa-2x fa-fw"></i>
Proyek
</a>
</li>
<li role="presentation"> <!-- feature tab menu #4 -->
<a href="#f4" aria-controls="f4" role="tab" data-toggle="tab">
<i class="fa fa-check-square-o fa-2x fa-fw"></i>
Verifikasi Pembayaran
</a>
</li>
</ul>
</div>
<div class="col-md-8"> <!-- right content col 6 -->
<!-- Tab panes -->
<div class="tab-content features-content"> <!-- tab content wrapper -->
<div role="tabpanel" class="tab-pane fade in active" id="f1"> <!-- feature #1 content open ANGGOTA-->
</div>
<div role="tabpanel" class="tab-pane fade" id="f2"> <!-- feature #2 content open SEKOLAH-->
</div>
<div role="tabpanel" class="tab-pane fade" id="f3"> <!-- feature #3 content open PESAN TERKIRIM-->
</div>
</div>
</div><!-- end right content col 6 -->
</div> <!-- end row -->
</div>
Controller
public function indexapu()
{
$user = DB::table('users')->paginate();
return View::make('adminpanelapu', ['users' => $user]);
}
public function indexaps()
{
$school = DB::table('school')->paginate();
return View::make('adminpanelaps', ['school' => $school]);
}
public function indexapp()
{
$project = DB::table('project')->paginate();
return View::make('adminpanelapp', ['project' => $project]);
}
Router
Route::get('/adminpanel/ajax/apu ', 'AdminControl#indexapu');
Route::get('/adminpanel/ajax/aps ', 'AdminControl#indexaps');
Route::get('/adminpanel/ajax/app ', 'AdminControl#indexapp');
Route::get('/adminpanel ', 'AdminControl#index');