Use HTML,CSS and Javascript in java code using IDE Eclipse - javascript

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.

Related

uncaught in promises in vanilla js

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.

dynamic creation of table and how to insert data

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

Script won't execute in html file

I have a header created in index.html and a separate page in test.html. I'm able to use scripts on the index.html page but not on the test.html page I can't seem to find out why.
In the following file the console log logs the test statement and i'm able to see it in the browser.
Index.html:
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-animate.js"></script>
<!-- Angular Config/Routes -->
<script src="app/app.js"></script>
<script src="app/routes.js"></script>
<!-- Angular Controllers -->
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/emailCtrl.js"></script>
<script src="app/controllers/managementCtrl.js"></script>
<script> console.log('test'); </script>
<!-- Angular Services -->
<script src="app/services/userServices.js"></script>
<script src="app/services/authServices.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- Cascade Style Sheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<title>MEAN Stack App</title>
</head>
<body ng-app="userApp" ng-controller="mainCtrl as main" ng-show="main.loadme" ng-cloak>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="/">MEAN Stack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/dashboard/{{ main.userid }}">Dashboard</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/mytests/{{ main.userid }}">My tests</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/comments">Comments</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/subscriptions">Subscriptions</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/recruitafriend">Invite friend and earn MONEY</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello {{ main.username }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="#" ng-click="main.logout();">Logout</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/management">Management</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/orders">Orders</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/profile">Hello {{ main.username }}</a>
</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">About</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">Help</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/login">Login</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/register">Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header ng-show="main.home">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">David Acosta</div>
<div class="intro-heading">MongoDB, ExpressJS, AngularJS, NodeJS</div>
<a ng-show="!main.isLoggedIn" href="/login" class="page-scroll btn btn-xl">Sign In</a>
<a ng-show="!main.isLoggedIn" href="/register" class="page-scroll btn twitterbtn">Register</a>
<a ng-show="main.isLoggedIn" href="#" ng-click="main.logout();" class="page-scroll btn btn-xl">Logout</a>
<a ng-show="main.isLoggedIn && main.authorized" href="/management" class="page-scroll btn facebookbtn">View</a>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<!-- Angular View -->
<div ng-view></div>
<!-- Angular View -->
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section ng-show="main.home" id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About This Page</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="glyphicon glyphicon-film"></span>
<h4 class="service-heading">YouTube</h4>
<p class="text-muted">Ensure you check out the YouTube video series associated with this web page. Visit:
https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-usd"></span>
<h4 class="service-heading">Facebook</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-save"></span>
<h4 class="service-heading">Github</h4>
<p class="text-muted">Ensure you check out the GitHub page associated with this web page. Visit:
https://github.com/gugui3z24
</p>
</div>
</div>
</div>
</section>
<footer ng-show="main.home">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © David Acosta</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li>Privacy Policy
</li>
<li>Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- BootstrapJS Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button ng-hide="main.hideButton" type="button" ng-click="main.endSession();" class="close" data-dismiss="modal">×</button>
<!-- Modal Header -->
<h4 class="modal-title">{{ main.modalHeader }}</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>{{ main.modalBody }}</p>
<div ng-show="main.hideButton" class="dizzy-gillespie"></div>
</div>
<div class="modal-footer">
<!-- Modal 'Yes' & 'No' Buttons -->
<button type="button" ng-hide="main.hideButton" ng-click="main.renewSession();" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" ng-hide="main.hideButton" ng-click="main.endSession();" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- BootstrapJS Modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
The test.html won't execute the code within the script tags. But the h1 will show.
Test.html:
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>

If you do not use jquery, Angular uses jqlite. once view is loaded, than inspect it in chrome. You will not find script tag in view.Because Angular don't what to do with script tag hence removes it. When angular detects jquery, it will use jquery instead jqlite for dom manipulation and jquery treat the script tag as special.
< <script src="path/jquery.js"></script>
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>

how can i set success alert at middle of the page?

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 :)

i have a bootstrap left side menu ..but when i click the menu items i want to dispaly content from particular nav item on the same page

<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>

Categories

Resources