We Keep Coding

I want to create a table inside a div, but it is printing outside the div

Here, the div is a pop up when a text in the html is clicked. 'db' is an object created in another part of the code, which holds various arrays. Here, the table consists of elements from one such array. The elements of the table, when clicked, displays another pop-up (This part is working fine).
The issue is, the table part of the div is just displayed without me clicking any text. Please help
<div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('Card').style.display='none'" class="close" title="Close">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<% int i;
if(db.cardNotPunched==0){
out.println(" You have punched your card everyday so far this month ");
} else {
out.println(" <table table-layout='fixed' border = '1' align='center' width='600'>\n" +
" <tr>\n" +
" <th> Day </th>\n" +
" </tr>");
for (i = 0; db.cardNotPunchedDays[i]!=0; i++) {
out.println(" <tr>\n" +
" <td style = 'text-align:center' height=40 > <div onclick= document.getElementById('Reason"+ db.cardNotPunchedDays[i]+ "').style.display='block' style= 'width:auto'; -webkit-box-align:'center' ><font style = 'color: black' > " + db.date[db.cardNotPunchedDays[i]] + " </font></div> </td>\n" +
" </tr>\n");
}
}
%></div>
</div>

How to get on server side html element attribute?

I have this code:
out.println("<form action=\"srvSearchResults\" method=\"post\">");
out.println("<tr>");
Book b = freeBooks.get(i);
out.println("<td><input type='submit' data-isbn=\""+b.getIsbn()+"\" name=\"ddd\" value=\""+b.getTitle()+"\" style=\"padding:0; border:none; background:none; cursor:pointer\" ></td>");
out.println("<td>" + b.getIsbn() + "</td>");
out.println("<td>" + b.getAuthorName() + "</td>");
out.println("<td>" + b.getPublishDate() + "</td>");
out.println("<td>" + "Free to borrow!" + "</td>");
out.println("</tr>");
out.println("</form>");
When I click on submit in generated code the servlet function is fired and by this row:
String isbn = request.getParameter("ddd");
I try to get value of data-isbn but it's null.
Any idea how can I get data-isbn attribute on server side afer submit?

When you submit an HTML form, only the values of the form fields are sent to the server, not all of the attributes. So the way it is written now, there is no way to get the value, because your server never received it.
If you want to get your ISBN, you can add an additional hidden input field that contains it:
out.println("<input type='hidden' name='isbn' value='" + b.getIsbn() + "'>");
You can put this right after the <form> open tag.
If you submit your form you can then use
String isbn = request.getParameter("isbn");
to get the ISBN.
As a side note: <form> is an invalid parent for <tr> elements. Therefor it is possible that the form doesn't behave the way you intend it to.

Getting data in order with Jsoup

I'm trying to get data from html in order from a web. Html code looks like:
<div class="text">
First Text
<br>
<br>
<div style="margin:20px; margin-top:5px; ">
<table cellpadding="5">
<tbody><tr>
<td class="alt2">
<div>
Written by <b>excedent</b>
</div>
<div style="font-style:italic">quote message</div>
</td>
</tr>
</tbody></table>
</div>Second Text<br>
<br>
<img class="img" src="https://developer.android.com/_static/images/android/touchicon-180.png"><br>
<br>
Third Text
</div>
What I want to do is create an Android layout scraping html, but I need to preserve the order of the elements. In this case:
TextView => First Text
TextView => Quote Message
TextView => Second Text
ImageView => img
TextView => Third Text
The problem comes when I try to get html values in order, using JSoup I get a String with "First Text Second Text Third Text" with Element.ownText, an then img at the end, resulting:
TextView => First Text Second Text Third Text
TextView => Quote Message
ImageView => img
What can I do to get that data in order?
Thanks in advance

You can parse the html into a list of html nodes. The list of nodes will preserve the DOM order and give what you want.
Check the parseFragment method :
This method will give you a list of nodes.

Try this.
String html = ""
+ "<div class=\"text\">"
+ " First Text"
+ " <br>"
+ " <br>"
+ " <div style=\"margin:20px; margin-top:5px; \">"
+ " <table cellpadding=\"5\">"
+ " <tbody><tr>"
+ " <td class=\"alt2\">"
+ " <div>"
+ " Written by <b>excedent</b>"
+ " </div>"
+ " <div style=\"font-style:italic\">quote message</div>"
+ " </td>"
+ " </tr></tbody>"
+ " </table>"
+ " </div>Second Text<br>"
+ " <br>"
+ " <img class=\"img\" src=\"https://developer.android.com/_static/images/android/touchicon-180.png\"><br>"
+ " <br>"
+ " Third Text"
+ " </div>";
Document doc = Jsoup.parse(html);
List<String> rootTexts = doc.select("div.text").first().textNodes().stream()
.map(node -> node.text().trim())
.filter(s -> !s.isEmpty())
.collect(Collectors.toList());
System.out.println(rootTexts);
OUTPUT:
[First Text, Second Text, Third Text]

This answer is a little late, but the correct way to do what you want to do is this. For your outermost <div>, instead of getting the child elements using Element.children(), you'll want to use Element.childNodes() instead.
Element.children() only returns child Elements, in which text is not included.
Element.childNodes() returns all child nodes, which includes TextNodes and Elements.
This solution works for me.

Paste the link in javascript

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>

JSP-JSTL table selects only the first row of table

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