I hava a play.jsp and I wanted to display the data in a formatted way like the question id and question in a single line and answer in next single line. How can I do that? I would be very thankful for the answers.
<div class="container">
<table class="table">
<center>
<p>Question</p>
<c:forEach items="${quiz}" var="qz">
<p> ${qz.id}</p>
<p>${qz.question}</p>
<p>${qz.ans1}</p>
<p> ${qz.ans2} </p>
<p>${qz.ans3} </p>
</c:forEach>
</center>
</table>
</div>
Now I am getting output in this way
Just put them in the same <p></p> like <p>${qz.id} ${qz.question}</p>
Also <center> tag was deprecated in HTML5 because it defines the presentation of its contents -- it doesn't describe its contents.
Use CSS instead:
.centered {
text-align: center;
}
.centered {
text-align: center;
}
<div class="container">
<table class="table">
<div class="centered">
<p>Question</p>
<c:forEach items="${quiz}" var="qz">
<p>${qz.id} ${qz.question}</p>
<p>${qz.ans1}</p>
<p> ${qz.ans2} </p>
<p>${qz.ans3} </p>
</c:forEach>
</div>
</table>
</div>
Related
I am using java, thymeleaf and flying saucer to generate pdf. I need to add another pdf (by fetching from Aws S3).
I tried iFrame and Embed but it is not working, I am not getting the second pdf in my generated pdf file!
Please help me in finding some way to add the pdf inside of pdf using thymeleaf;
My code-
<body>
<div class="header">
<div style="float: right; color: #000971">
Logo</div>
</div>
<div style="">
<div style="text-align: center; padding-top: 15px; "><h1 style="color:#000971;"><span th:text="${Name}"></span></h1></div>
<div style="padding-top: 30px; margin-left: 50px">
<h1 style="color:darkcyan;"><u>Report:</u></h1>
<h1 style="color: darkcyan; margin-top: 250px">Report By: <br />
<span style="color:#000971;" th:text="${firstName}"></span> <span style="color:#000971;" th:text="${lastName}"></span></h1>
<!-- <h1 style="color: #006382;">Last Name: <span style="color:#6FB8D9;" th:text="${lastName}"></span></h1>-->
<br/>
<div id="lastContent" style="margin-top: 80px">
<h2 style="color: darkcyan">REPORT DATE:</h2>
<h2 style="color: #000971">Created Date: <span th:text="${createdTime}"></span></h2>
<h2 style="color: #000971">Last Updated Date: <span th:text="${lastUpdated}"></span></h2>
</div>
</div>
</div>
<div>
<iframe src="http://www.wright.edu/~david.wilson/eng3000/samplereport.pdf" style="width:100%;height:700px;"></iframe>
<embed src="./samplereport.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" />
</div>
</body>
In order page when I make a payment, I get the created payment listed in payments list page. The created payment will always list on the first row of the table. I want to know how to get a text “This is Project:
“ and also be able to click on it. Every payment has its own id in a row i.e. Here is the snipped of the table:
<div id="PAYMENT-CONTAINER" style="clear:both">
<div class="list-widget" id="PAYMENT-LIST">
<ul style="visibility: visible;" class="table">
<li id="393118">
<div class="no-expand col0" style="text-align: center; width: 31px;"><input type="checkbox" class="rowSelect" value="393118"></div>
<div class="no-expand col1" style="text-align: center; width: 57px;">
<span class="tag untagged">•••</span>
</div>
<div class="col2" style="text-align: center; width: 155px;">
07/28/2015
</div>
<div class="col3" style="width: 401px;">
5280 FAST PITCH
</div>
<div class="col4" style="width: 344px;">
This is Project:
</div>
<div class="col5" style="text-align: right; width: 213px;">
$25.00
</div>
<div class="col6" style="width: 188px;">
Stacey Smith
</div>
<div class="col7" style="width: 178px;">
In Process
</div>
</li>
<li id="393119">
<div class="no-expand col0" style="text-align: center; width: 31px;"><input type="checkbox" class="rowSelect" value="393119"></div>
<div class="no-expand col1" style="text-align: center; width: 57px;">
<span class="tag untagged">•••</span>
</div>
<div class="col2" style="text-align: center; width: 155px;">
07/28/2015
</div>
<div class="col3" style="width: 401px;">
5280 FAST PITCH
</div>
<div class="col4" style="width: 344px;">
Donations are for good cause
</div>
<div class="col5" style="text-align: right; width: 213px;">
$26.00
</div>
<div class="col6" style="width: 188px;">
Stacey Smith
</div>
<div class="col7" style="width: 178px;">
In Process
</div>
</li>
You can get the text WebElement by using below xpath:
//div[#class='col4']
or
//div[contains(text(),'This is project');
you can use any one of the xpath to find web element.
Something like this:
WebElement element = driver.findElement(By.xpath("//div[#class='col4']"));
//Print text
print(element.getText());
//Click on that element if it is clickable.
element.click();
Xpath selector for your case is: //div[contains(text(), 'This is Project:')]
. For example, if instance of webdriver is called like "driver", then code should be:
driver.findElement(By.xpath("//div[contains(text(), 'This is Project:')]")).click();
If your required text "This is Project:" always appears in first row, then you can try below xpath:-
//li[1]/div[#class='col4']
//to get text:-
driver.findElement(By.xpath("//li[1]/div[#class='col4']")).getText();
//to click on it:-
driver.findElement(By.xpath("//li[1]/div[#class='col4']")).click();
I have a Jsp page in which there is a table that is populated from the database. I want to Implement a search based on the fields on this table please tell me how to do this.
My Jsp page is given below
<html>
<jsp:include page="Headj.jsp"/>
<body>
<script type="text/javascript">
function deletedata(prdid) {
var url = "Con_Product?action=delete&prdid=" + prdid;
window.location = url;
}
function editdata(prdid) {
var url = "Editprd.jsp?prdid=" + prdid + "&type=p&pg=prd";
window.location = url;
}
</script>
<div id="maindiv" class="container-fluid">
<jsp:include page="Headerj.jsp"/>
<div id="menu_content">
<jsp:include page="Menuj.jsp"/>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Product</h1>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Display</li>
<li>Add New</li>
<!--<li><a href="#">Messages<a><li>-->
</ul>
<br>
<div class="panel panel-default">
<div class="panel-body" style="padding: 3px;">
<strong style="font-size: 20px; font-family: sans-serif; color: #3b6282; margin-left: 10px;">Display Products</strong>
<form class="navbar-right form-inline">
<div class="form-group">
<select class="form-control">
<option>Choose Option</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
</div>
</div>
<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></button>
</form>
</div>
</div>
<div class="alert-success"><p>${param.message}</p></div>
<%
general gen = new general();
Op_Product opp = new Op_Product();
Op_Category opc = new Op_Category();
ResultSet rs = opp.getallproducts();
%>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<th><strong>Sl. No.</strong></th>
<th><strong>Product</strong></th>
<th><strong>Category</strong></th>
<th><strong>Sub-Category</strong></th>
<th><strong>Creator</strong></th>
<th><strong>Operations</strong></th>
</thead>
<%
int no = 1;
while (rs.next()) {
%>
<tr>
<td><%= no%></td>
<td><%= rs.getString("Prd_nme")%></td>
<td><%= opc.getOnecategoryname(rs.getString("Prd_catid"))%></td>
<td><%= opc.getOnesubcategoryname(rs.getString("Prd_scatid"))%></td>
<td><%= gen.getCreator(rs.getString("Prd_usr"))%></td>
<td>
<button type="button" class="btn btn-default btn-sm btn-danger" onclick="deletedata('<%= rs.getString("Prd_id")%>');">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button type="button" class="btn btn-default btn-sm btn-primary" onclick="editdata('<%= rs.getString("Prd_id")%>')">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<%
no++;
}
%>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div>
<jsp:include page="Footerj.jsp"/>
</div>
<!-- Modal -->
<div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
ScreenShot of my page is given below.
The section the is circled is the search option the drop down list will have the field names and the search values will be entered in the text box.
To implement this you have 2 options:
The nice and slightly more complicated option
You can make an Ajax call using a JavaScript framework like jQuery to a servlet that will make the database query and respond to the ajax call via a Json object. This method will allow you to present the data without updating the page and the user experience will be better.
The easier option
You can submit that form to a servlet that makes the query and exposes the data as request attributes that are then presented in a jsp using jstl
Either way I recommend you to avoid scripting on the jsp files ( no <% %>) and instead use jstl and ${} to expose information. And do all the object creation and other login on servlets. That will make your code a lot easier and maintainable.
I did this operation using Jquery, this way there is no page reload and since it is in the client side it will be more faster. A sample of what i have done is given in
http://jsfiddle.net/9hGym/35/
The JQuery code is given below
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
var s = $("#sss").val(); if($(this).find('td').eq(s).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_7_r6" class="Action_Group CoachView CoachView_show" data-eventid="" data-viewid="Action_Group5" data-config="config_div_2_1_2_1_7_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_7_1_r6" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_7_1_1_r6" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_4" data-viewid="Action3" data-config="config_div_2_1_2_1_7_1_1_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action">
<button id="div_2_1_2_1_7_1_1_r6-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i class="fa fa-user"></i>
<span>Select</span>
</a>
</div>
<div id="div_2_1_2_1_7_1_2_r6" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_8" data-viewid="Action4" data-config="config_div_2_1_2_1_7_1_2_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action">
</div>
</div>
</div>
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
I have tried x path expression as
//div[#class='row-fluid']/table/tbody/tr[1]/td[7]/div/div[2]/div[2]/div/a/span
//*[#id='div_2_1_2_1_7_1_1_r6']/a/span
Also tried CSS selector as
div[id='div_2_1_2_1_7_1_1_r6'] a[class='p-action-link'] span
any of above identification is not working please let me know if any one has best solutions for the above problem!
Try this XPATH:
//a[span='Select']
If it is not working, please indent the HTML.
Try with below locators.
By.xpath("//div[#id='div_2_1_2_1_7_1_1_r6']//a//span")
or
By.xpath("//div[#id='div_2_1_2_1_7_1_1_r6']//a//span[text()='Select']")
or
By.xpath("//span[text()='Select']")
or
By.cssSelector("div[id='div_2_1_2_1_7_1_1_r6'] a span")
If that div id is not static (I mean dynamically generating unique id everytime) then you should consider some other attribute or some part of it.
By.xpath("//div[contains(#id,'div_2_1')]//a//span")
or
By.xpath("//div[contains(#id,'div_2_1')]//a//span[text()='Select']")
or
By.xpath("//span[text()='Select']")
or
By.cssSelector("div[id*='div_2_1'] a span")
This page displays several records when i select the Crime Number form the href tag i only want to post the data in that row only. Can someone tell me where i am going wrong here:
I did a different form for each record that returns from the server but only the first record gets returned all the time.
EDIT
The page is POST using java script and the Id its receiving is NULL
The crimeRecNo is posted accurately however the victim and criminal list only the first row is posted and not the selected one.Why????
function submitPage(crimeRecNo) {
document.getElementById("crimeList"+$('#crimeRecNo').val()).action = "getCrime/"+ crimeRecNo + ".htm";
document.getElementById("crimeList"+$('#crimeRecNo').val()).method = "POST";
document.getElementById("crimeList"+$('#crimeRecNo').val()).submit();
}
Html
</head>
<body>
<c:forEach items="${crimes}" var="crime">
<form:form id="crimeList${crime.crimeRecNo}" name="crimeList" commandName="crime">
<div id="content">
<div class="row-${crime.crimeRecNo}">
<h2>
<a class="crimeRecNo" href="${crime.crimeRecNo}">Crime Record
Number : ${crime.crimeRecNo}</a><form:input path="crimeRecNo" id="crimeRecNo"
value="${crime.crimeRecNo}" />
</h2>
<div class="crimeReport">
<label>${crime.crimeDetails}</label>
</div>
<div id="container">
<div id="crimePhotoz">
<div id="victimLabel">
<label class="heading">Victims/Witness In Crime</label>
</div>
<div class="grid_row">
<c:forEach items="${crime.victims}" var="victim">
<input type="hidden" value="${victim.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.victims}" var="victim">
<div class="names">
<a class="crimeNames" href="${victim.socialSecurityNumber}">${victim.name}</a>
<form:input path="victims" id="victims" value="${victim.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
<div id="criminalLabel">
<label class="heading">Criminals In Crime</label>
</div>
<div class="grid_row2">
<c:forEach items="${crime.criminals}" var="criminal">
<input type="hidden" value="${criminal.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.criminals}" var="criminal">
<div class="names">
<a class="crimeNames" href="${criminal.socialSecurityNumber}">${criminal.name}</a>
<form:input path="criminals" id="criminals" value="${criminal.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
</div>
</div>
</div>
<hr>
</div>
</form:form>
</c:forEach>
</body>
</html>
Maybe you are missing some quotes?
document.getElementById(${crime.crimeRecNo})
If ${crime.crimeRecNo} is a string this becomes
document.getElementById(myRecNo)
which is invalid javascript. In this case you should add quotes:
document.getElementById("${crime.crimeRecNo}")
If ${crime.crimeRecNo} is a number you don't need quotes but then you might have invalid ids. According to this html ids must at least start with a character. Iam not sure if this can cause problems but maybe you should try <form id="record-${crime.crimeRecNo}" .. >