Hi everyone!
I have script in Spring MVC application which adds an entry in the table.
$(document).ready(function () {
$('#saveSubject').submit(function (e) {
$.post('/university/subjectAdd', $(this).serialize(), function (subject) {
$('#subjectsTableResponse').last().append(
'<tr>' +
'<td align=\"center\">' + subject.title + '</td>' +
'<td align=\"center\">' + '<a href=\"c:url value=\'/subject/update/{'+subject.id+'}\'/>' + Update + '</a>'+'</td>'+
'<td align=\"center\">' + '<a href=\"c:url value=\'/subject/delete/{'+subject.id+'}\'/>' + Delete + '</a>'+'</td>'+
'</tr>'
);
});
clearInputs();
e.preventDefault();
});
});
But when you add the recording error takes related link
Uncaught ReferenceError: Update is not defined
My table:
<div class="tableSubjects">
<table border=2 bgcolor="#C1CDCD" id="subjectsTableResponse">
<tr>
<td align="center"><B>Предмет</B></td>
</tr>
<c:forEach items="${subjectList}" var="subject">
<c:if test="${subject.deleted eq false}">
<tr>
<td align="center">${subject.title}</td>
<td align="center">
Update
</td>
<td align="center">
Delete
</td>
</tr>
</c:if>
</c:forEach>
</table>
</div>
enter code here
how to fix this error?
You have two issues:
If Update and Delete are supposed to be literal strings, they should be enclosed in quotes.
In order to have subject passed as an object rather than a string of JSON, you have to pass a data type of 'json' to $.post.
$(document).ready(function () {
$('#saveSubject').submit(function (e) {
$.post('/university/subjectAdd', $(this).serialize(), function (subject) {
$('#subjectsTableResponse').last().append(
'<tr>' +
'<td align=\"center\">' + subject.title + '</td>' +
'<td align=\"center\">' + '<a href=\"c:url value=\'/subject/update/{'+subject.id+'}\'/>Update</a>'+'</td>'+
'<td align=\"center\">' + '<a href=\"c:url value=\'/subject/delete/{'+subject.id+'}\'/>Delete</a>'+'</td>'+
'</tr>'
);
}, 'json');
clearInputs();
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
Here is question scenario
<html>
<body>
<div class="specalClass">
<table>
<tbody id="mainTable">
<tr><td>data 1</td></tr>
<tr><div>Data</div></tr>
</tbody>
</table>
</div>
</body>
</html>
There is a problem, how to get div that is directly placed in tr tag, all element are traceable, except this div.
This is just a sample code: we can not use XPath or div-tag directly, because the real page is a big one. We can get this table by its id and then need to iterate it.
You can use CSS selector to get div which is direct child of tr in table with id mainTable:
doc.select("#mainTable tr>div");
but it won't work because we have another problem here.
div is not allowed in tr so Jsoup's HTML parser removes it because it follows the standard. To skip HTML validation you should parse the document using XML parser:
Document doc = Jsoup.parse(html, "", Parser.xmlParser());
It will keep the original structure and now that div will be reachable.
EDIT:
To counter the accusations of posting not working answer I'm pasting whole code with the output of both HTML and XML parsers.
The first example doesn't work, but the second one according to my answer works fine:
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.parser.Parser;
public class Stackoverflow62376512 {
public static void main(final String[] args) {
String html = "<html>\n" +
" <body>\n" +
" <div class=\"specalClass\">\n" +
" <table>\n" +
" <tbody id=\"mainTable\">\n" +
" <tr><td>data 1</td></tr>\n" +
" <tr><div>Data</div></tr>\n" +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
" </body>\n" +
"</html>";
Document doc = Jsoup.parse(html, "", Parser.htmlParser()); // same as Jsoup.parse(html);
System.out.println("Document parsed with HTML parser (div inside tr will be dropped): " + doc);
System.out.println("Selecting div (this will fail and show null): " + doc.select("#mainTable tr>div").first());
System.out.println("\n-------------\n");
doc = Jsoup.parse(html, "", Parser.xmlParser());
System.out.println("Document parsed with XML parser (div inside tr will be kept): " + doc);
System.out.println("Selecting div (this one will succeed): " + doc.select("#mainTable tr>div").first());
}
}
and the output is:
Document parsed with HTML parser (div inside tr will be dropped): <html>
<head></head>
<body>
<div class="specalClass">
<div>
Data
</div>
<table>
<tbody id="mainTable">
<tr>
<td>data 1</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</body>
</html>
Selecting div (this will fail and show null): null
-------------
Document parsed with XML parser (div inside tr will be kept): <html>
<body>
<div class="specalClass">
<table>
<tbody id="mainTable">
<tr>
<td>data 1</td>
</tr>
<tr>
<div>
Data
</div>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Selecting div (this one will succeed): <div>
Data
</div>
Here, a table of numbers is generated with a loop. Each value in the table is a button, which, when clicked, displays 10 times the value in the pop-up. In the actual project, the data is in jsp, so I cannot use javascript.
Please help.
Here is my JSP:
<HTML>
<title> Hi </title>
<%
out.println(" <table border = \"1\" align=\"center\" width='600'>\n" +
" <tr>\n" +
" <th> Number </th>\n" +
" </tr>");
int i;
for(i=0;i<10;i++){
out.println(" <tr>\n" +
" <td style = \"text-align:center\" height=\"40\"> <font style=\"color: black >" + "<button onclick=\"document.getElementById('id01').style.display='block'\" style=\"width:auto; -webkit-box-align: center; \"> " +i+ " </button> </a>" +"</font> </td>\n" +
" </tr> ");
}
%>
</HTML>
DIV:
<div id="id01" class="modal">
<div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%
//
// I need to display id*10;
//
//
%>
</centre></div>
</div>
</div>
The problem is that i equals 9 by the end of the loop, so 'i' of individual buttons are lost.
Please help.
You could write the whole modal <div> code inside another for loop with changing ids and the onclick for each button will display its corresponding modal popup.
Here is your JSP:
<HTML>
<title> Hi </title>
<%
out.println(" <table border = \"1\" align=\"center\" width='600'>\n" +
" <tr>\n" +
" <th> Number </th>\n" +
" </tr>");
int i;
for(i=0;i<10;i++){
out.println(" <tr>\n" +
" <td style = \"text-align:center\" height=\"40\"> <font style=\"color: black >" + "<button onclick=\"document.getElementById('" + "id" + i + "').style.display='block'\" style=\"width:auto; -webkit-box-align: center; \"> " +i+ " </button> </a>" +"</font> </td>\n" +
" </tr> ");
}
%>
</HTML>
DIV:
<% int j=0;
for (j=0;j<10;j++){ %>
<div id='<%= "id"+j %>' class="modal">
<div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('<%= "id"+j %>').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%= "id"+j %>
</centre></div>
</div>
</div>
<% } %>
I tested it on TutorialsPoint and seems to work fine.
Im getting ORA-01722 error while inserting data from jsp form into the oracle database. i know that this error is pointing out to me that i am trying to insert a character string inside a number datatype but the problem is that everything looks to be fine to me but still im getting the error
here is the code i use.
roomregister.jsp
<%
String roomcategory=request.getParameter("category");
if(roomcategory==null)
{
response.sendRedirect("categoryrooms.jsp");
return;
}
//out.println(roomcategory);
%>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(
function ()
{
//getRoomsByCategory();
}
);
var roomcategory="<%=roomcategory%>";
/* function f1()
//{
// var nrooms=$("#hdmaxrooms").val()-1;
//alert(nrooms);
}*/
function chooseRoom(roomno)
{
$("#txtroomno").val(roomno);
}
function roombook()
{
var gender="";
if(document.getElementById("txtmale").checked)
gender="Male";
if(document.getElementById("txtfemale").checked)
gender="Female";
if(gender=="")
{
alert("Please select a gender");
return ;
}
var receiptno=$("#txtreceiptno").val();
var name=$("#txtname").val();
var address=$("#txtaddress").val();
var idproof=$("#txtidproof").val();
var dob=$("#txtdob").val();
var contact=$("#txtcontact").val();
var roomno=$("#txtroomno").val();
var fromdate=$("#txtfromdate").val();
var todate=$("#txttodate").val();
var roomcategory=$("#txtroomcategory").val();
var noofguestname=$("#txtnoofguestname").val();
var charge=$("#txtcharge").val();
var purpose=$("#txtpurpose").val();
var bookingamount=$("#txtbookingamount").val();
var url="bookrooms.jsp?receiptno="+ receiptno + "&name=" + name + "&address=" + address + "&idproof=" + idproof + "&dob=" + dob + "&gender="+ gender + "&contact=" + contact + "&roomno="
+ roomno + "&fromdate=" + fromdate +"&todate="+ todate + "&roomcategory=" + roomcategory + "&noofguestname=" + noofguestname +
"&charge=" + charge + "&purpose=" + purpose + "&bookingamount=" + bookingamount;
var xhr=new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.onreadystatechange=function (){roomBookResponse(xhr);};
xhr.send();
//alert(url);
}
function roomBookResponse(xhr)
{
if(xhr.readyState!=4)
return ;
//getRoomsByCategory();
$("#diverrors").html(xhr.responseText);
// alert("xZXZX" + xhr.responseText);
}
function getroom()
{
var fromdate =$("#txtfromdate").val();
var todate =$("#txttodate").val();
var url="roomsforbooking.jsp?fromdate="+ fromdate + "&todate=" + todate + "&category=" + roomcategory ;
//alert(url);
var xhr=new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.onreadystatechange=function (){getRoomResponse(xhr);};
xhr.send();
//alert(url);
}
function getRoomResponse(xhr)
{
if(xhr.readyState!=4)
return ;
// getRoomsByCategory();
$("#diverrors").html(xhr.responseText);
// alert("xZXZX" + xhr.responseText);
}
</script>
<font color="white">
<div id="divroomsbycategory"></div>
<div id="image" class="image">
<center>
<table class="divcenter" width="60%" border="0">
<tr><td colspan="2" align="center">ROOM BOOKING</td></tr>
<tr><td colspan="2" align="center"> <div id="diverrors"></div> </td></tr>
<tr><td><BR>Receipt_No</td><td><BR><input type="text" id="txtreceiptno"/></td></tr>
<tr><td>Name</td><td><input type="text" id="txtname"/></td></tr>
<tr><td>Address</td><td><input type="text" id="txtaddress"/></td></tr>
<tr><td>Id_Proof</td><td><input type="text" id="txtidproof"/></td></tr>
<tr><td>Date_of_Birth</td><td><input type="text" id="txtdob"/></td></tr>
<tr><td>Gender</td><td>Male<input type="radio" id="txtmale" value="male" name="gender"/>
Female<input type="radio" id="txtfemale" value="female" name="gender"/></td></tr>
<tr><td>Contact</td><td><input type="text" id="txtcontact"/></td></tr>
<tr><td> Room_No</td><td>
<input type="text" id="txtroomno" readonly="readonly"/>
 
<input type="button" value="GET" onclick="getroom();" class="divbutton"/></td></tr>
<tr><td>From_Date</td><td><input type="text" id="txtfromdate"/></td></tr>
<tr><td>TO-date</td><td><input type="text" id="txttodate"/></td></tr>
<tr><td>Room_Category</td><td><input type="text" id="txtroomcategory" readonly="readonly" value="<%=roomcategory%>"/></td></tr>
<tr><td>No_Of_Guest</td><td><input type="text" id="txtnoofguestname"/></td></tr>
<tr><td>Charge</td><td><input type="text" id="txtcharge"/></td></tr>
<tr><td>Purpose</td><td><input type="text" id="txtpurpose"/></td></tr>
<tr><td>Booking-Amount</td><td><input type="text" id="txtbookingamount"/></td></tr>
<tr><td colspan="2" align="center"><BR><input type="button" value="SUBMIT" onclick="roombook();" class="divbutton"/></td></tr>
<tr><td colspan="2" align="center"><div id="divroomsbycategory"></div></td></tr>
</table>
</center>
</div>
</font>
<style>
.divbutton:hover
{
border: solid white;
background-color: seagreen;
}
.divcenter:hover
{
border: solid;
border-top-color: white;
border-bottom-color: white;
border-left-color: white;
border-right-color: white;
}
.image
{
width: 100%;
height: 600px;
background-image: url("images/332.jpg");
}
</style>
bookrooms.jsp
<%#page import="utilitiespackage.Date"%>
<%#page import="java.sql.Connection"%>
<%#page import="dbpackage.DBConnector"%>
<%#page import="java.sql.PreparedStatement"%>
<%#page import="validationspackage.Validations"%>
<%
try
{
String receiptno=request.getParameter("receiptno");
String name=request.getParameter("name");
String address=request.getParameter("address");
String idproof=request.getParameter("idproof");
String dob=request.getParameter("dob");
String gender=request.getParameter("gender");
String contact=request.getParameter("contact");
String roomno=request.getParameter("roomno");
String fromdate=request.getParameter("fromdate");
String todate=request.getParameter("todate");
String roomcategory=request.getParameter("roomcategory");
String noofguestname=request.getParameter("noofguestname");
String charge=request.getParameter("charge");
String purpose=request.getParameter("purpose");
String bookingamount=request.getParameter("bookingamount");
//Connection con=DBConnector.getConnection(session);
PreparedStatement ps=DBConnector.getPreparedStatement(session, "insert into roomregister values ( ?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
ps.setString(1,receiptno);
ps.setString(2,name);
ps.setString(3,address);
ps.setString(4,idproof);
ps.setString(5,contact);
ps.setString(6,roomno);
ps.setString(7,fromdate);
ps.setString(8,roomcategory);
ps.setString(9,noofguestname);
ps.setString(10,charge);
ps.setString(11,purpose);
ps.setString(12,gender);
ps.setString(13,dob);
ps.setString(14,bookingamount);
Date d1=new Date(fromdate);
Date d2=new Date(todate);
for(;Date.compare(d1, d2)<0;d1.advance())
{
ps.setString(6, "" + d1);
ps.executeUpdate();
}
out.println(Validations.setSuccess("Booked"));
//String message=Validations.setSuccess("deleted");
//out.println(message);
}
catch(Exception ex)
{
System.out.println(ex);
out.println(Validations.setError(ex));
}
%>
my database table:
error that i am getting:
ps.setString(1,receiptno);
isn't that a "number" field and you are calling setString?
The documentation for java.sql.PreparedStatement has this to say:
Note: The setter methods (setShort, setString, and so on) for setting IN parameter values must specify types that are compatible with the defined SQL type of the input parameter. For instance, if the IN parameter has SQL type INTEGER, then the method setInt should be used.
i fetched and displayed data as a table in html from mysql db using jsp and java now what i want is when a user clicks on the particular row then the data in that row should populate in 3 different tags
example if my table has this data
Name Place Mobile number
a abc 123
b def 234
c ghi 345
(The above table is fetched from mysql db)
if the user clicks on the 3rd Row then the data such as name place and mobile number should be displayed in 3 different tags as shown below
Name: c
Place: ghi
Mobile: 345
thanks in advance
Before i used to have a button on the right side of each row with the "Name"(if it is a row of c then the button has c) on it so i dressed the button by a pic using CSS.
here goes the code i used
<form action="Options2" method="post">
<table id="sorter" class="sortable" id="example" class="pretty">
<tr>
<th>Book Id</th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Owner</th>
<th>Borrow Date</th>
<th>Return Date</th>
<th>Requested By</th>
<th>Actions</th>
</tr>
<%
ArrayList rs=(ArrayList)request.getAttribute("news");
ListIterator itr=rs.listIterator();
int i=1;
while( itr.hasNext()){
%>
<tr>
<td><%=itr.next()%></td>
<% int Id = itr.nextIndex(); %>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<% int Id2 = itr.nextIndex(); %>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<%
String Bname=rs.get(Id).toString();
System.out.println(Bname);
String Stat=rs.get(Id2).toString();
System.out.println(Stat);
if(!Stat.equals("Not Availible"))
{
%>
<td>
<input class="buttonir" type="Submit" name="X" value="<%=Bname %>"></td>
</tr>
<%
}
}
%>
</table>
</form>
Try this:
$('table tr').click(function () {
var BookId = $(this).children('td:eq(0)').html();
var Title = $(this).children('td:eq(1)').html();
var Author = $(this).children('td:eq(2)').html();
$('div').html(
'Book Id: ' + BookId + '<br />' +
'Title: ' + Title + '<br />' +
'Author:' + Author + '<br />'
);
});
Demo: http://jsfiddle.net/UPxB9/1/
Compare it with your Code its almost same just few changes mentioned
Only following function is added in your code and two lines more which are highlighted out of code
Edit
Add following function in your (already working) javascript tag on this page or in a js file which you are using in this page
function displayRowData(yourRow)
{
var dv=document.getElementById('yourDivId');
dv.innerHTML="<br>Name : "+ yourRow.children[0].innerHTML";
dv.innerHTML += "<br>Place: "+yourRow.children[1].innerHTML";
dv.innerHTML += "<br>Name : "+yourRow.children[2].innerHTML";
}
<form action="Options2" method="post">
<table id="sorter" class="sortable" id="example" class="pretty">
<tr>
<th>Book Id</th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Owner</th>
<th>Borrow Date</th>
<th>Return Date</th>
<th>Requested By</th>
<th>Actions</th>
</tr>
<%
ArrayList rs=(ArrayList)request.getAttribute("news");
ListIterator itr=rs.listIterator();
int i=1;
while( itr.hasNext()){
%>
Following Line is just modified it was already in your code
<tr onclick='displayRowData(this)'>
<td><%=itr.next()%></td>
<% int Id = itr.nextIndex(); %>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<% int Id2 = itr.nextIndex(); %>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<%
String Bname=rs.get(Id).toString();
System.out.println(Bname);
String Stat=rs.get(Id2).toString();
System.out.println(Stat);
if(!Stat.equals("Not Availible"))
{
%>
<td>
<input class="buttonir" type="Submit" name="X" value="<%=Bname %>"></td>
</tr>
<%
}
}
%>
</table>
Following line is added to your code
<div id='yourDivId'></div>
</form>
Im new to HTML, Java, Javascript, JSP, and JSTL.
I have a simple JSP page using JSTL as my tag library. When I used javascript to get all the values of the a row by clicking all I can get are the values of the first row even when I click the 2nd, 3rd, or nth row. I want to get only the row I clicked.
in my javascript:
<script type="text/javascript" >
function getTblContents() {
var pName = document.getElementById("pName").innerHTML;
var pAddress = document.getElementById("pAddress").innerHTML;
var pEmail = document.getElementById("pEmail").innerHTML;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
my jstl code:
<c:forEach var="people" items="${people.data}" varStatus="status">
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents();" >
<td id="pName" >${people.name}</td>
<td id="pAddress" >${people.address}</td>
<td id="pEmail" >${people.email}</td>
</tr>
</c:forEach>
the javascript and jsp are on the same page.
Please help. Thanks in advance.
Every id must be unique in html, it is restriction that html sets. So you should add some
uniqe identifier to ids ie. people.id and past that id to javascript function.
<script type="text/javascript" >
function getTblContents(id) {
var pName = document.getElementById("pName-"+id).innerHTML;
var pAddress = document.getElementById("pAddress-"+id).innerHTML;
var pEmail = document.getElementById("pEmail-"+id).innerHTML;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
<c:forEach var="people" items="${people.data}" varStatus="status">
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents('${people.id}');" >
<td id="pName-${people.id}" >${people.name}</td>
<td id="pAddress-${people.id}" >${people.address}</td>
<td id="pEmail-${people.id}" >${people.email}</td>
</tr>
</c:forEach>
The document.getElementById($ID) will return the first element in the dom with the specified id(the first row of your table).
You could try
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents(this);" >
and refer to the "this" element instead. like:
var pname = this.pname;
or
var pname = this.pname.innetHTML;
in the javascript. and see if that returns the right row of the table