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
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>
I have a JSP page in my web application and i want to refresh the page with the parameter of option.
<select class="form-control combobox" name="education" >
<option value="" disabled selected hidden>Choose an education</option>
<option>English</option>
<option>French</option>
<option>Dutch</option>
<option>Spanish</option>
</select>
I want to use this parameter for querying my database again. Forexample;
<%
BookDAO bdao = new BookDAO();
for (TblBooks book : bdao.getAllBooks()) {%>
<tr>
<td><%=book.getTittle()%></td>
<td><%=boek.getAuthor()%></td>
<td><%=boek.getCategory()%></td>
<td><%=boek.getEducation()%></td>
<td><input type='checkbox' name ='chk1' /></td>
</tr>
<% }%>
I can get the parameter with request.getParameter("education") but how can i refresh page and query again with this parameter?
In Javascript, You can ask a web page to reload itself (the exact same URL) by:
location.href = location.href;
You can ask a web page to load a different location using the same mechanism:
location.href = 'http://www.google.com'; // or whatever destination url you want
You can get the value of a select control (which needs to have an id attribute):
var ctrl = document.getElementById("idOfSelectControl");
var selectedOption = ctrl.options[ctrl.selectedIndex].value;
So, if you update your JSP to give the control an id:
<select class="form-control combobox" id="education" name="education" >
you should be able to reload the page:
var educationControl = document.getElementById("education");
var selectedOption = educationControl.options[educationControl.selectedIndex].value;
location.href = "http://mysite.example/mypage?education=" + selectedOption;
By the help of Jason i have solved it. I added an onchange event to my select tag
onchange="changeThePage()"
Then i defined a javascript function.
function changeThePage() {
var selectedOption = "book.jsp?education=" + $("#education option:selected").text();
location.href = selectedOption;
}
Then i got the parameter by
String education = request.getParameter("education");
Then i added String education as parameter to my bdao.getAllBooks(education)) method for to query.
'
<script>
function abc(){
var yourSelect = document.getElementById( "ddlViewBy" );
var val = yourSelect.options[ yourSelect.selectedIndex ].value;
//window.location.href=window.location.href;
alert(val);
window.location.replace("index.jsp?name="+val);
}
</script>
<select id="ddlViewBy" onchange="abc()">
<option>select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<%
String name=request.getParameter("name");
if(name!=null){
%>
<table>
<tr>
<td>author<%=name%></td>
<td>book name<%=name%></td>
</tr>
</table>
<%
}
%>
Hi,
try this, this will be helpful,
when you select a value it will call abc, function and then you are assigning that value in scriptlet..and also page is refreshing. in scriptlet you can access that value using request.getParameter("name").
now you can write your code inside scriptlet..hope helpful for someone.. :)
thanks...
I have the following HTML code:
<tr class="odd">
<td class="first name">
3i Group PLC
</td>
<td class="value">457.80</td>
<td class="change up">+10.90</td> <td class="delta up">+2.44%</td> <td class="value">1,414,023</td>
<td class="datetime">11:35:08</td>
For which I need to get the data
457.80
(ie. The value attribute), and I have this Java code currently:
String FTSE = "http://www.bloomberg.com/quote/UKX:IND/members";
doc = Jsoup.connect(FTSE).get();
Elements links = doc.select("a[href='/quote/III:LN']");
for (Element link : links) {
// get the value from href attribute
System.out.println("\nlink : " + link.attr("value"));
System.out.println("text : " + link.text());
When I run my program it terminates having output nothing. How do I make it so that it outputs the value, which in this case, is '457.80'?
links will contain the <a href...> element. What you are trying to retrieve is the text of a completely different element, i.e. a <td> tag which has the class value.
My guess is that you have multiple <tr> elements and you only want the one which contains the link you've selected. In which case you will need the following code:
String FTSE = "http://www.bloomberg.com/quote/UKX:IND/members";
doc = Jsoup.connect(FTSE).get();
Elements trs = doc.select("tr:has(a[href='/quote/III:LN'])");
Elements values = trs.select("td.value");
link = values.get(0);
System.out.println("text : " + link.text());
Or something similar...
I have:
<table class="cast_list">
<tr><td colspan="4" class="castlist_label"></td></tr>
<tr class="odd">
<td class="primary_photo">
<a href="/name/nm0000209/?ref_=ttfc_fc_cl_i1" ><img height="44" width="32" alt="Tim Robbins" title="Tim Robbins"src="http://ia.media-imdb.com/images/G/01/imdb/images/nopicture/32x44/name-2138558783._V379389446_.png"class="loadlate hidden " loadlate="http://ia.media-imdb.com/images/M/MV5BMTI1OTYxNzAxOF5BMl5BanBnXkFtZTYwNTE5ODI4._V1_SY44_CR1,0,32,44_AL_.jpg" /></a> </td>
<td class="itemprop" itemprop="actor" itemscope itemtype="http://schema.org/Person">
<a href="/name/nm0000209/?ref_=ttfc_fc_cl_t1" itemprop='url'> <span class="itemprop" itemprop="name">Tim Robbins</span>
</a> </td>
<td class="ellipsis">
...
</td>
how can I get only the information inside the second td class? (td class= itemprop). I want to get "/name/nm0000209/?ref_=ttfc_fc_cl_t1" and "Tim Robbins".
This is my code:
Elements elms = doc.getElementsByClass("cast_list").first().getElementsByTag("table");
Elements tds = elms.select("td");
for(Element td : tds){
if(td.attr("class").contains("itemprop")){
Elements links = tds.select("a[href]");
for(Element link : links){
if(link.attr("href").contains("name/nm"))
{
String castname = link.text();
String castImdbId = link.attr("href");
System.out.println("CastName:" + castname + "\n");
System.out.println("CastImdbID:" + castImdbId + "\n");
}
but it also returns the text of the link inside td class="primary_phptp" which is null, this is part of my output:
CastName:
CastImdbID:/name/nm0000209/?ref_=ttfc_fc_cl_i1
CastName:Tim Robbins
CastImdbID:/name/nm0000209/?ref_=ttfc_fc_cl_t1
CastName:
......
Could someone please let me know where is my problem? I think the condition if(td.attr("class").contains("itemprop")) does not work at all.
Thanks,
Use a different css selector instead of td. Since the right <td> is identified be the class, why not use it:
td.itemprop
Your java code then would start like this instead
Elements tds = elms.select("td.itemprop");
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>