This code below let me delete the row from the table in jsp page but not from my database,how can i do this? In other words i need to delete the row (to my database) whenever is checked a checkbox on my jsp page. i need a dynamicaly delete table row both on database and on jsp page.
<%#page import="java.sql.*" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>destcode</title>
<link rel="stylesheet" type="text/css" href="DELETE BUTTON CSS.css">
</head>
<style> Stable, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<%
Class.forName("com.mysql.jdbc.Driver");
String myDatabase = "jdbc:mysql://localhost:3306/project_app?user=root&password=1234";
Connection myConnection = DriverManager.getConnection(myDatabase);
Statement myStatement = myConnection.createStatement();
String search=request.getParameter("search");
ResultSet rs = myStatement.executeQuery("SELECT * FROM DEST WHERE COUNTRY='"+search+"' OR CITY='"+search+"' ");
%>
<table style="width:100%">
<table id="Dest_table">
<tr>
<th> Dest. No. </th>
<th>Check </th>
<th>Country</th>
<th>City</th>
<th>Url of Destination</th>
<th>Category</th>
</tr>
<tr> <%while(rs.next()){ %>
<td> <%=rs.getString("ID_DEST") %> </td>
<td><INPUT type="checkbox" name="chk" value="checked"/></td>
<td> <%=rs.getString("COUNTRY") %></td>
<td> <%=rs.getString("CITY") %> </td>
<td> <a href=<%=rs.getString("URL") %> > <%=rs.getString("URL") %> </a>
</td>
</tr>
<% } %>
</table>
<SCRIPT language="javascript">
function deleteRow(Dest_table) {
try {
var table = document.getElementById(Dest_table);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
Related
How to format the data using jspdf, i want 1st column in bold, and the second column in normal text, want to align it in the middle of the pdf output.
Also i want a different colour for the first column in pdf and another color in 2nd column.
This is my code now-
<!DOCTYPE html>
<html>
<head>
<title>success</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
data.push(headers);
// go through cells
for (var i=1; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
function callme(){
var table = tableToJson($('#table-id').get(0));
var doc = new jsPDF('l','pt','letter',true);
doc.setFont("courier");
doc.setFontType("italic");
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
$.each(table, function(i, row){
$.each(row, function(j,cell){
if(j=="startdate" | j==2){
doc.cell(5,20,290,20,cell,i);
}
else{
doc.cell(5,20,290,20,cell,i);
}
});
});
doc.save('Safaa.pdf');
}
</script>
</head>
<body>
<p>form value</p>
<div class="container" id="pdf">
Download PDF
{{#each arrayofpromotion}}
<table id="table-id" class="table table-bordered">
<thead>
<tr>
<th>StartDate</th>
<td> {{StartDate}} </td>
</tr>
<tr>
<th>EndDate</th>
<td>{{EndDate}}</td>
</tr>
<tr>
<th>promotionId</th>
<td>{{PromotionId}}</td>
</tr>
<tr>
<th>ArticleNo</th>
<td>{{ArticleNo}}</td>
</tr>
<tr>
<th>PromotionsubsAdjID</th>
<td>{{PromotionsubsAdjID}}</td>
</tr >
<tr>
<th>promotionNameEN</th>
<td>{{PromotionNameEN}}</td>
</tr>
<tr>
<th>promotionNameFR</th>
<td>{{PromotionNameFR}}</td>
</tr>
<tr>
<th>LedgerDesc</th>
<td>{{LedgerDesc}}</td>
</tr>
<tr>
<th>LedgerDescFR</th>
<td>{{LedgerDescFR}}</td>
</tr>
</thead>
</table>
{{/each}}
Call Me
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
</div>
</body>
</html>
[Right now i am getting this type of Output][1]
To change color:
doc.setTextColor(15, 15, 15);
To change font weight:
doc.setFontType("bold");
To align text:
doc.text('your text', 150, 255, 'center');
I making "select" which options are 'Edit', 'Delete'. When I click "Edit", the page goes to the "edit_product.jsp" well. But when I click "Delete", the page goes to the "edit_product.jsp" again, not "delete_product.jsp". I want to just click select option, which is going other page -"Edit" is "edit_product.jsp", and "Delete" is "delete_product.jsp"-.
Here is the code.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8"); %>
<%# page language="java" import="java.sql.*,java.util.*" %>
<jsp:include page="../basis/basis.jsp" flush="false" />
<!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=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel="StyleSheet" href="product.css" type="text/css">
<script src="../basis/basis.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".all_check").click(function() { //select all
..
});
$('.edit_select').change(function() {
if ($('.edit_select option[name=edit]:selected')) {
window.location.href="edit_product.jsp?code="+$('.edit_select option[name=edit]:selected').val();
return;
} else if ($('.edit_select option[name=delete]:selected')) {
window.location.href="delete_product.jsp?code="+$('.edit_select option[name=delete]:selected').val();
return;
}
});
});
</script>
</head>
<body>
<div class="hhh">
All Products
</div>
<div class=" add_btn btn-group" role="group">
..
</div>
<center>
<div class="all_product">
<table class="table" data-toggle="table">
<tr>
<th></th>
<th>
check <br />
<input type="checkbox" name="all_check" class="all_check" />
</th>
<th>Product Code</th>
<th>Image</th>
<th>Price</th>
<th>Status</th>
<th>Business Group</th>
<th>Category</th>
<th>Stock</th>
<th>Supplier</th>
<th>Marketplaces</th>
<!--
<th>Added Time</th>
<th>Added User</th>
<th>Modified Time</th>
<th>Modified User</th>
-->
</tr>
<%
Vector product_code = new Vector();
Vector image = new Vector();
Vector price_cny = new Vector();
Vector status = new Vector();
Vector bus_grp = new Vector();
Vector category = new Vector();
Vector stock = new Vector();
Vector supplier = new Vector();
Vector market = new Vector();
Connection con= null;
Statement st =null;
ResultSet rs =null;
String img = "";
String url = "http://localhost/Becomeus/Scripts/Products/image/";
try {
Class.forName("org.gjt.mm.mysql.Driver");
} catch (ClassNotFoundException e ) {
out.println(e);
}
try{
con = DriverManager.getConnection("jdbc:mysql://localhost/becomeus?useUnicode=true&characterEncoding=utf8","root","qlzjadjtm!2");
} catch (SQLException e) {
out.println(e);
}
try {
st = con.createStatement();
String sql = "select * from new_product";
rs = st.executeQuery(sql);
if (!rs.next()) {
out.println("No Product.");
} else {
do {
product_code.addElement(rs.getString("product_code"));
image.addElement(rs.getString("image"));
price_cny.addElement(new Integer(rs.getInt("price_cny")));
status.addElement(rs.getString("status"));
bus_grp.addElement(rs.getString("business_group"));
category.addElement(rs.getString("category"));
stock.addElement(new Integer(rs.getInt("stock")));
supplier.addElement(rs.getString("supplier"));
market.addElement(rs.getString("marketplaces"));
} while(rs.next());
int totalrows = product_code.size();
for (int j=0; j<=(totalrows-1); j++) {
String pro_code = (String)product_code.elementAt(j);
out.println("<tr>");
out.println("<td>"); //select
out.println("<select name='edit_select' class='edit_select selectpicker' data-width='100px'>");
out.println("<option data-hidden='true'>-Select-");
out.println("<option name='edit' value="+product_code.elementAt(j)+">Edit");
out.println("<option name='delete' value="+product_code.elementAt(j)+">Delete");
out.println("<option value='duplicate'>Duplicate");
out.println("<option value='print'>Print");
out.println("<option value='viewrecord'>View Record");
out.println("</select>");
out.println("</td>");
out.println("<td>"); //check box
out.println("<input type='checkbox' name='check' />");
out.println("</td>");
out.println("<td><a href='#' class='product_code'>"+product_code.elementAt(j)+"</a></td>");
out.println("<td><img width=100 height=100 src='image/"+image.elementAt(j)+"' /></td>");
out.println("<td>"+price_cny.elementAt(j)+"</td>");
out.println("<td>"+status.elementAt(j)+"</td>");
out.println("<td>"+bus_grp.elementAt(j)+"</td>");
out.println("<td>"+category.elementAt(j)+"</td>");
out.println("<td>"+stock.elementAt(j)+"</td>");
out.println("<td>"+supplier.elementAt(j)+"</td>");
out.println("<td>"+market.elementAt(j)+"</td>");
out.println("</tr>");
}
rs.close();
}
st.close();
con.close();
} catch (java.sql.SQLException e) {
out.println(e);
}
%>
</table>
</div>
</center>
</body>
</html>
I using jQuery and jsp. Can window.location.href use only one? I using if else if, but no action to else if. How can I use? Please answer to me.
To get the selected value name attribute use this,
if ($(this).find('option:selected').attr("name")==='edit') {
window.location.href="edit_product.jsp?code="+$('.edit_select option[name=edit]:selected').val();
return;
} else if($(this).find('option:selected').attr("name")==='delete') {
window.location.href="delete_product.jsp?code="+$('.edit_select option[name=delete]:selected').val();
return;
}
This should redirect you to the respective pages.
Yes you can use window.location.href any number of times.
MDN window.location.href
window.location.href="edit_product.jsp?code="+$('.edit_select option[name=edit]:selected').val();
You can also use jQuery - load
$( "#result" ).load( "ajax/test.html" );
i am trying to retrieve values from jsp using ajax as explained here here . but its not returning the values from the DB.Please help with this
home page
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jsp Page</title>
<script>
function showuser(str)
{
var xreq;
if (str == "")
{
document.getElementById("showtext").innerHTML = "";
return;
}
if (window.XMLHttpRequest)
{
xreq = new XMLHttpRequest();
}
else
{
xreq = new ActiveXObject("Microsoft.XMLHTTP");
}
xreq.onreadystatechange = function()
{
if ((xreq.readyState == 4) && (xreq.status == 200))
{
document.getElementById("showtext").innerHTML
= xreq.responseText;
}
}
xreq.open("get", "getuser.jsp?q=" + str, "true");
xreq.send();
}
</script>
</head>
<body>
<form>
<select name="user" onchange="showuser(this.value)" >
<option value="">Select Student name....</option>
<option value="abhi">abhi</option>
<option value="alex">alex</option>
<option value="adam">adam</option>
</select>
</form>
<br/>
<div id="showtext">The response will come here</div>
</body>
</html>
DB connection establishment page
<%#page import="java.text.SimpleDateFormat"%>
<%#page import="java.util.*,java.sql.*,java.io.*" %>
<%#page import="javax.servlet.*" %>
<%#page import="javax.servlet.http.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsp Page</title>
</head>
<body>
<%! Connection con;%>
<%! Statement s;%>
<%! ResultSet rs;%>
<% String name = request.getParameter("st");
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
con = DriverManager.getConnection("URL");
s = con.createStatement();
rs = s.executeQuery("select * from studentinfo where name='" + name + "'");
} catch (Exception e) {
e.printStackTrace();
}
%>
<div id="dtl_table"><table border='3' cellpadding='5'
cellspacing='2' width="400px">
<tr bgcolor="66FF00">
<th>Name</th>
<th>Branch</th>
<th>Year</th>
<th>Email id</th>
</tr>
<tr>
<% while (rs.next()) {
%>
<td><%= rs.getString("NAME")%></td>
<td><%= rs.getString("BRANCH")%></td>
<td><%= rs.getString("YEAR")%></td>
<td><%= rs.getString("EMAIL")%></td>
<% }%>
</tr>
</table></div>
</body>
</html>
Table structure
CREATE TABLE studentinfo(
name VARCHAR2(30),
branch VARCHAR2(20),
year VARCHAR2(20),
email VARCHAR2(80)
);
There is no parameter st in the request Object
String name=request.getParameter("st");
The parameter you are passing is q
xreq.open("get","getuser.jsp?q="+str,"true");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ticket Forwarding</title>
</head>
<body style="background-image:url('bg.png')">
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<script language="javascript">
function deleteRow(tableID)
{
try
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e){alert(e);}
}
</script>
<img src="abstergo.jpg">
<p style="color:#8A2BE2;font-family:Lucida Console;font-size:25px;background-
image:url('cell-blue.jpg');margin:0px;width:1800px";> I.T.S->Forwarding & setting
priorities for a ticket </p><br>
<table class="imagetable" id="datatable" style="margin:20px 0px 0px 50px">
<tr>
<th>ID</th>
<th>Subject</th>
<th>Subtopic</th>
<th>Message</th>
<th>Severity</th>
<th>Priority</th>
<th>Status</th>
<th>forward to</th>
<th>checkbox</th>
</tr>
<tr>
<td>1</td><td>login problem</td>
<td>
<select name="helptopic">
<option value="accounts">accounts</option>
<option value="admin issues">admin issues</option>
<option value="it-support" selected>it-support</option>
<option value="project enquiry">project enquiry</option>
<option value="general enquiry">general enquiry</option>
<option value="tech. support">tech. support</option>
<option value="feedback">feedback</option>
<option value="others">others</option>
</select>
</td>
<td>Unable to login</td>
<td>
<select name="severity">
<option>Minor</option>
<option>Normal</option>
<option>Major</option>
<option>Critical</option>
</select>
</td>
<td>
<select name="priority">
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</td>
<td>
<select name="status">
<option>New</option>
<option>Assigned</option>
<option>Resolved</option>
</select>
</td>
<td><input type="text" size="30"></td>
<td><input type="checkbox" name="chk"/></td>
</tr>
</table>
<input type="button" value="Forward" onclick="deleteRow('datatable')" />
</body>
</html>
above is the code which i made.here the first row of the table is headings.from second row onwards the table contains data.i want to delete the row which is selected in check box and when i click on forward button.but the above code is not working.pls help
You don't select the checkbox inside td so try this, and this jsfiddle :
function deleteRow(tableID) {
var table = document.getElementById(tableID).tBodies[0];
var rowCount = table.rows.length;
// var i=1 to start after header
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
// index of td contain checkbox is 8
var chkbox = row.cells[8].getElementsByTagName('input')[0];
if('checkbox' == chkbox.type && true == chkbox.checked) {
table.deleteRow(i);
}
}
}
Using JQuery you could do something similar to this:
In the head section of your html file add this:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.deleteBtn').click(function(){
$('input:checked').each(function(){
$(this).parent('tr').remove();
});
});
});
</script>
The first script reference links to the JQuery library on-line. The second script block initialises a click function on the element with the class deleteBtn once the DOM is fully loaded. You want to add this class to the button.
<input type='button' value='Forward' class='deleteBtn' />
The script then finds all inputs that are checked and remove their parent tr. You may need to play around with it to get it working exactly for your scenario.
I have created a simple site that reads a database table and displays it in a html table in the browser.
I have a button that allows for the table to be altered, saved & then automatically forwarded to the homepage with the updated table.
I also have a select button with which the user can select that particular row and it updates a column in the table.
My problem is that I need a way to show which row has been selected.
I prefer to have a column in the HTML table that shows an image as to which one is selected.
Here is my homepage where the database table is being displayed.
In the left column of the html is where I would like to add an image if that row is selected.
I have tried several things like using javascript and just can't wrap my head around it?
Can I get some help?
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="java.io.*, java.util.*, java.sql.*"%>
<%#page import="oracle.jdbc.driver.OracleConnection" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
</head>
<body>
<br><br>
<form method="post" name="form">
<table id="data" border="1">
<tr>
<th>Selected</th>
<th>Name</th>
<th>Address</th>
<th>Contact No</th>
<th>Email</th>
<th>Select</th>
</tr>
<%
int sumcount=0;
ResultSet rs = null;
Connection con = null;
Statement st = null;
try {
DriverManager.registerDriver (new oracle.jdbc.OracleDriver());
con = DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:XE", "username", "password");
st = con.createStatement();
rs = st.executeQuery("SELECT * FROM employee");
%>
<%
while(rs.next()) {
%>
<tr>
<td></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>
</tr>
<%
}
%>
<%
}
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</body>
</html>
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
//Here goes the code to display image
var images = document.getElementsByName("selectImg");
for(var i=0;i<images.length;i++){
if(images[i].id!="img_"+id)
images[i].style.display="None";
else
images[i].style.display="Block";
}
//End
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
You need to put a hidden div with image in first column.
<%
while(rs.next()) {
%>
<tr>
<td><div name="selectImg" id="img_<%=rs.getString(1)%>">
<img src="path_to_image"></div></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>