| Current File : /home/obabain/public_html/abc/create_elements.jsp |
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="Connection.jsp" %>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.*,java.util.*"%>
<%
Statement st=con.createStatement();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/select2.min.css" rel="stylesheet">
<link href="css/jquery.datetimepicker.css" rel="stylesheet">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* body {font-family: Arial, Helvetica, sans-serif;} */
/* The Modal (background) */
.modal {
display:none; /* Hidden by default */
position: static; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top:10opx; /* Location of the box */
left: 100px;
top: 100px;
bottom:100px;
right:120px;
width: 120%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 100%;
}
/* The Close Button */
.close {
color:red;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color:blue;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<%@include file="master.jsp" %>
<style>
table {
border-collapse: collapse;
border-spacing: ;
width: 80%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
.rrow {
display:inline-block;
clear: both;
}
.center {
margin: auto;
width: 100%;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hideform
{
display:none;
}
</style>
<body>
<script>
// JavaScript popup window function
function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=300,width=700,left=50,top=50,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes')
}
</script>
<div class="row">
<div class="col-md-9">
<!-- Vista r�pida del sitio -->
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Elements</h3>
</div>
<div class="panel-body">
<!-- Trigger/Open The Modal -->
<!-- <button style="margin-left:830px;" class="btn btn-primary" id="myBtn">AddNew</button> -->
<div style="margin-left:885px; ">
<button id="myBtn" type="button" class="btn btn-primary">CreateNew</button>
</div>
<br>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" style="width:800px;">
<span class="close">×</span>
<p>
<form action="#" method="post">
<br>
<div class="form-group" style="margin-left:240px;"> <!-- -->
<div class="row">
<div class="col-sm-4">
<label for="">Create Element:</label>
<input type="text" class="form-control" id="" name="create_element" placeholder="">
</div>
</div>
</div>
<br>
<input type="submit" class="btn btn-primary" style="margin-left:280px;" value="Submit">
</form>
<%
String create_element=request.getParameter("create_element");
%>
<%
try
{
if(create_element!=null ||create_element.length()!=0)
{
/* Statement st=con.createStatement(); */
int i=st.executeUpdate("insert into elements(Element)values('"+create_element+"')");
out.println("");
}
}
catch(Exception e)
{
System.out.print(e);
e.printStackTrace();
}
%>
</p>
</div>
</div>
<!-- <b style="color:red">Order Details :</b> <br> -->
<table class="table table-bordered">
<thead>
<tr class="p-3 mb-2 bg-info text-white">
<th>Sl Number</th>
<th>Elements</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<%
try
{
/* st=con.createStatement(); */
ResultSet rs = st.executeQuery("select * from elements");
while(rs.next())
{
%>
<tbody>
<tr>
<td scope="col">
<%=rs.getString("id") %>
</td>
<td scope="col">
<%=rs.getString("Element") %>
</td>
<td scope="col">
<a href="edit_element.jsp?id=<%=rs.getString("id")%>"> <span class="glyphicon glyphicon-edit"></span></a>
</td>
<td scope="col">
<a href="delete_element.jsp?id=<%=rs.getString("id")%>"> <span class="glyphicon glyphicon-remove"></span></a>
</td>
</tbody>
<%
}
}
catch (Exception e)
{
e.printStackTrace();
}
%>
</tbody>
</table>
<div style="margin-left:10px;">
<button onclick="goBack()" type="button" class="btn btn-primary">Back</button>
</div>
<script>
function goBack() {
window.history.back();
}
</script>
<script>
// JavaScript popup window function
function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=300,width=700,left=50,top=50,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes')
}
</script>
<!-- <a href="Foundary.jsp" onclick="basicPopup(this.href);return false">Open a popup window</a>
-->
</div>
</div>
</div>
</div>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="assets/extra-libs/sparkline/sparkline.js"></script>
<!-- Wave Effects -->
<script src="dist/js/waves.js"></script>
<!-- Menu sidebar -->
<script src="dist/js/sidebarmenu.js"></script>
<!-- Custom JavaScript -->
<script src="dist/js/custom.min.js"></script>
<!-- this page js -->
<script src="assets/libs/jquery-steps/build/jquery.steps.min.js"></script>
<script src="assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script>
// Basic Example with form
var form = $("#example-form");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function(event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function(event, currentIndex) {
alert("Submitted!");
}
});
</script>
<script type="text/javascript">
$('#show').on('click', function () {
$('.center').show();
$(this).hide();
})
$('#close').on('click', function () {
$('.center').hide();
$('#show').show();
})
</script>
<script type="text/javascript">
function validate()
{
// var t2=document.po.expdate.value;
var t3=document.getElementById("sqno").value;
var t1=document.getElementById("datetimepicker").value;
var t4=document.getElementById("datetimepickerex").value;
if( t1==null || t1=="" || t4==null || t4=="" || t3==null || t3=="" )
alert('Fill all mandatory fields');
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
<script>
$('select').select2();
</script>
<script>
jQuery('#datetimepicker').datetimepicker({
timepicker:false,
todayBtn: "linked"
//mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});
jQuery('#datetimepicker2').datetimepicker({
timepicker:false,
todayBtn: "linked"
//mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script type="text/javascript">
function goBack()
{
window.history.back();
};
</script>
</body>
</html>