I have this html that posts name of an artist to an api that I wrote in Perl which queries mysql database and outputs the result. I can post the artist to api and also the api grabs the data from database but its not diplaying the data back to my html page. Could you guys please help?
HTML script :
#!/usr/bin/perl -w
print "content-type:text/html; charset=utf-8\n\n";
print <<ENDTAG
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
</form>
<script language="JavaScript">
function showInput()
{
var artist = document.getElementById("user_input").value;
console.log(artist);
var api = "http://api/post";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", api, true);
xmlhttp.setRequestHeader("Content-Type", "application/text; charset=UTF-8");
xmlhttp.setRequestHeader('x-auth-token', 'ooooo');
xmlhttp.onreadystatechange = function() {
console.log('readyStatechange: ' + xmlhttp.readyState);
if(xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
var response = xmlhttp.responseText;
document.getElementById('display').innerHTML = response;
}
else
{
//alert ("Something Went Wrong");
// console.error(xmlhttp.status);
}
}
console.log('Before open: ' + xmlhttp.readyState);
xmlhttp.send(artist);
}
</script>
</body>
<form method="POST" action="">
<label><b>Enter Artist</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();">
<br>
<label>Your input: </label>
<p><span id="display"></span></p>
</html>
ENDTAG
The perl api returned following :
Opened database successfully
ARTIST is : john denver
Content-Type: text/html; charset=ISO-8859-1
Content-Type: text/html
<p>The database contains the following:</p>
<table cols=3 border=1>
<tr>
<th>Title</th>
<th>Year</th>
<th>Album</th>
</tr><tr>
<td>Downhill Stuff</td>
<td>1979</td>
</tr>
<tr>
<td>Dreamland Express</td>
<td>1985</td>
</tr>
<tr>
<td>Love Is The Master</td>
<td>1986</td>
</tr>
<tr>
<td>Windsong</td>
<td>1975</td>
</tr>
<tr>
<td>Catch Another Butterfly</td>
<td>1969</td>
</tr>
<tr>
<td>Cowboy's Delight</td>
<td>1975</td>
</tr>
<tr>
<td>How Can I Leave You Again</td>
<td>1977</td>
</tr>
<tr>
<td>Love Again</td>
<td>1986</td>
</tr>
<tr>
<td>Sail Away Home</td>
<td>1970</td>
</tr>
<tr>
<td>Sweet Melinda</td>
<td>1979</td>
</tr>
<tr>
<td>Daydream</td>
<td>1969</td>
</tr>
<tr>
<td>Gimme Your Love</td>
<td>1985</td>
</tr>
<tr>
<td>Hold On Tightly</td>
<td>1234</td>
</tr>
<tr>
<td>I Can't Escape</td>
<td>1986</td>
</tr>
<tr>
<td>It's A Possibility</td>
<td>1986</td>
</tr>
<tr>
<td>Let Us Begin (What Are We Maki</td>
<td>1986</td>
</tr>
<tr>
<td>Love Again</td>
<td>1986</td>
</tr>
<tr>
<td>Love Is The Master</td>
<td>1986</td>
</tr>
<tr>
<td>One World</td>
<td>1986</td>
</tr>
<tr>
<td>To The Wild Country</td>
<td>1977</td>
</tr>
<tr>
<td>Dreams</td>
<td>1982</td>
</tr>
<tr>
<td>Forest Lawn</td>
<td>1970</td>
</tr>
<tr>
<td>Got My Heart Set On You</td>
<td>1985</td>
</tr>
<tr>
<td>Tradewinds</td>
<td>1977</td>
</tr>
<tr>
<td>Circus</td>
<td>1969</td>
</tr>
<tr>
<td>Eagles & Horses</td>
<td>1990</td>
</tr>
<tr>
<td>Flight (The Higher We Fly)</td>
<td>1983</td>
</tr>
<tr>
<td>Life Is So Good</td>
<td>1979</td>
</tr>
<tr>
<td>The Ballad Of St. Anne's Reel</td>
<td>1980</td>
</tr>
<tr>
<td>Hold On To Me</td>
<td>1991</td>
</tr>
<tr>
<td>The Harder They Fall</td>
<td>1985</td>
</tr>
<tr>
<td>What One Man Can Do</td>
<td>1982</td>
</tr>
<tr>
<td>Johnny B. Goode</td>
<td>1979</td>
</tr>
<tr>
<td>Shanghai Breezes</td>
<td>1982</td>
</tr>
<tr>
<td>Take Me Home, Country Roads</td>
<td>1971</td>
</tr>
<tr>
<td>Wrangell Mountain Song</td>
<td>1980</td>
</tr>
<tr>
<td>A Wild Heart Looking For A Home</td>
<td>1985</td>
</tr>
<tr>
<td>Wild Montana Skies</td>
<td>1983</td>
</tr>
<tr>
<td>Heart To Heart</td>
<td>1982</td>
</tr>
<tr>
<td>Relatively Speaking</td>
<td>1982</td>
</tr>
<tr>
<td>Gospel Changes</td>
<td>1971</td>
</tr>
<tr>
<td>Around And Around</td>
<td>1971</td>
</tr>
<tr>
<td>Druthers</td>
<td>1977</td>
</tr>
<tr>
<td>Garden Song</td>
<td>1979</td>
</tr>
<tr>
I did look around for similar posts and I did find some but couldnt figure out where Im going wrong.
I looked at your code and found that you made a number of mistakes: in form itself and submission part (onsubmi=....), in javascript processing submission (was corrected - return false, please adjust api to your server).
I did not replicate database but used my own script with your data from the table, you will find it bellow.
I hope that you will find it useful, although I think that AJAX would be a better option
Main file with perl code
#!/usr/bin/perl
use strict;
use warnings;
use feature 'say';
print "content-type:text/html; charset=utf-8\n\n";
print <<ENDTAG
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<script language="JavaScript">
function showInput()
{
var artist = document.getElementById("user_input").value;
console.log(artist);
//alert(artist);
var api = "http://localhost/cgi-bin/api_perl.pl";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", api, true);
xmlhttp.setRequestHeader("Content-Type", "application/text; charset=UTF-8");
xmlhttp.setRequestHeader('x-auth-token', 'ooooo');
xmlhttp.onreadystatechange = function() {
console.log('readyStatechange: ' + xmlhttp.readyState);
if(xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
var response = xmlhttp.responseText;
document.getElementById('display').innerHTML = response;
} else {
//alert ("Something Went Wrong");
//console.error(xmlhttp.status);
}
}
console.log('Before open: ' + xmlhttp.readyState);
xmlhttp.send(artist);
return false;
}
</script>
<form method="POST" onsubmit="return showInput();">
<label><b>Enter Artist</b></label>
<input type="text" name="message" id="user_input">
<input type="submit">
</form>
<br>
<label>Your input: </label>
<p><span id="display"></span></p>
</body>
</html>
ENDTAG
File api_perl.pl
##!/usr/bin/perl
use strict;
use warnings;
use feature 'say';
say "Content-Type: text/html\n";
say "
<p>The database contains the following:</p>
<table cols=3 border=1>
<tr>
<th>Title</th>
<th>Year</th>
<th>Album</th>
</tr>
";
while(<DATA>) {
next if /^\s*$/;
chomp;
my($song,$year,$album) = split ',';
say "<tr><td>$song</td><td>$year</td><td>$album</td></tr>";
}
say "
</table>
";
__DATA__
Downhill Stuff,1979,Album 1
Dreamland Express,1985,Album 2
Love Is The Master,1986,Album 1
Windsong,1975,Album 1
Catch Another Butterfly,1969,Album 2
Cowboy's Delight,1975,Album 1
How Can I Leave You Again,1977,Album 1
Love Again,1986,Album 1
Sail Away Home,1970,Album 1
Sweet Melinda,1979,Album 1
Daydream,1969,Album 1
Gimme Your Love,1985,Album 1
Hold On Tightly,1234,Album 1
I Can't Escape,1986,Album 1
It's A Possibility,1986,Album 1
Let Us Begin (What Are We Maki),1986,Album 1
Love Again,1986,Album 1
Love Is The Master,1986,Album 1
One World,1986,Album 1
To The Wild Country,1977,Album 1
Dreams,1982,Album 1
Forest Lawn,1970,Album 1
Got My Heart Set On You,1985,Album 1
Tradewinds,1977,Album 1
Circus,1969,Album 1
Eagles & Horses,1990,Album 1
Flight (The Higher We Fly),1983,Album 1
Life Is So Good,1979,Album 1
The Ballad Of St. Anne's Reel,1980,Album 1
Hold On To Me,1991,Album 1
The Harder They Fall,1985,Album 1
What One Man Can Do,1982,Album 1
Johnny B. Goode,1979,Album 1
Shanghai Breezes,1982,Album 1
Take Me Home - Country Roads,1971,Album 1
Wrangell Mountain Song,1980,Album 1
A Wild Heart Looking For A Home,1985,Album 1
Wild Montana Skies,1983,Album 1
Heart To Heart,1982,Album 1
Relatively Speaking,1982,Album 1
Gospel Changes,1971,Album 1
Around And Around,1971,Album 1
Druthers,1977,Album 1
Garden Song,1979,Album 1
File styles.css (put into root web directory or edit <link rel='stylesheet' href='/styles.css'> and point href to proper location of styles.css file -- edit main perl file with form)
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 4px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I'm new to jsp and I'm trying to present the results of my database to a table in my jsp page. This looks like it works well as it presents all the elements correctly ! The problem is that I also want to to have a separate button and when I'm clicking it , I want the satatus of the line the button belongs to , to be converted from "unconfirmed" to "confirmed", but when I'm pressing it all the records turned to "confirmed" and not only the one the button belongs to !
My jsp code:
<table border="1">
<tr>
<th>Username</th>
<th>Role</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
</tr>
<%
while(rs.next()){%>
<td> <%=rs.getString("username") %></td>
<td> <%=rs.getString("role") %></td>
<td> <%=rs.getString("firstname") %></td>
<td> <%=rs.getString("lastname") %></td>
<td> <%=rs.getString("email") %></td>
<td> <%=rs.getString("phone") %></td>
<td> <%=rs.getString("status") %></td>
<% if(rs.getString("status").equals("unconfirmed")){%>
<td><input type="button" name="users" onclick="<%Bean.changeStatus(rs.getString("username"));%>"</td>
<% }
else{ %>
<td>Check</td>
<% } %>
</tr>
<% } %>
</table>
And .java code:
public void changeStatus(String us){
ResultSet rs = null;
Statement state = null;
String query = null;
try{
state=this.getConn().createStatement();
query="update users set status='confirmed' where username='"+us+"'";
int rowsEffected = state.executeUpdate(query);
}catch(SQLException e){
}
}
Put a single listener on the table. When it gets a click from an input with a button that has a name of "unconfirmed" and value "unconfirmed", change its value to "confirmed". Get rid of the input's id (they aren't used for anything here), or make them all unique.
<script type="text/javascript">
function handleClick(evt) {
var node = evt.target || evt.srcElement;
if (node.name == 'unconfirmed') {
node.value = "confirmed";
}
}
</script>
<table id="table1" border="1" onclick="handleClick(event);">
<thead>
<tr>
<th>Select
</thead>
<tbody>
<tr>
<td>
<form name="f1" action="#" >
<input id="UnConfirmed1" type="submit" name="unconfirmed" value="UnConfirmed">
</form>
<tr>
<td>
<form name="f2" action="#" >
<input id="UnConfirmed2" type="submit" name="unconfirmed" value="UnConfirmed">
</form>
<tr>
<td>
<form name="f3" action="#" >
<input id="UnConfirmed3" type="submit" name="unconfirmed" value="onfirmed">
</form>
</tbody>
</table>
I am new to thymeleaf and am trying to create an html table where a boolean decides whether the text will be pass or fail in some of the columns.
SmokeTest.passOrFailArray is an array of booleans.
Right now the smokeTest.name is showing up in the column but the passed or failed text is not showing up at all.
Here is my thymeleaf/html code
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Smoke Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1" style="width:300px">
<tr>
<td>Test Name</td>
<td th:each="testsThatRan : ${testsThatRan}"
th:text="${testsThatRan}">Tests</td>
</tr>
<th:block th:each="smokeTest : ${smokeTests}">
<tr>
<td th:text="${smokeTest.name}">A Smoke Test'</td>
<th:block th:each="smokeTest.passOrFailArray : ${smokeTest.passOrFailArray}">
<td th:if="${smokeTest.passOrFailArray} == true" th:text="Passed"></td>
<td th:if="${smokeTest.passOrFailArray} == false" th:text="failed"></td>
</th:block>
</tr>
</th:block>
</table>
</body>
</html>
Here is the class that im using as a variable in thymeleaf
public testers() throws IOException {
localPath = "/Users/dansbacher14/Documents/workspace/OBI_nightly_test/src/OBI_ci_scripts_tests";
remotePath = "ssh://git#stash.ops.aol.com:2022/obi/obi_ci_scripts.git";
localRepo = new FileRepository(localPath + "/.git");
pathToSmoke = "BPS/GPS/GATHR/SMOKE";
pathToODirectory = "test-results";
git = new Git(localRepo);
}
public static <C> void testClone() throws IOException, InvalidRemoteException, TransportException, GitAPIException
{
Git.cloneRepository().setURI(remotePath).setDirectory(new File(localPath)).call();
}
//____________SETTERS AND GETTERS __________________________________________________________________________________
public void setName(String name)
{
jmxName = name;
}
public String getName()
{
return jmxName;
}
public boolean[] getPassOrFailArray()
{
return passOrFailArray;
}
public String getLocalPath()
{
return localPath;
}
}
This is how the source code is presented by the browser.
<!DOCTYPE HTML>
<html>
<head>
<title>Smoke Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1" style="width:300px">
<tr>
<td>Test Name</td>
<td>OBI01</td>
<td>DEV</td>
</tr>
<tr>
<td>authAmtTesting.jmx</td>
</tr>
<tr>
<td>authTesting.jmx</td>
</tr>
<tr>
<td>CC_Crypto.jmx</td>
</tr>
<tr>
<td>ci_address.jmx</td>
</tr>
<tr>
<td>ci_cardtype_negative.jmx</td>
</tr>
<tr>
<td>ci_cardtype_positive.jmx</td>
</tr>
<tr>
<td>promoSmokeTst.jmx</td>
</tr>
<tr>
<td>tokenizedPayment.jmx</td>
</tr>
</table>
</body>
</html>
Is it possible to do something like this in thymeleaf? If so how could I make this work? Thanks
This code works
<th:block th:each="pf : ${smokeTest.passOrFailArray}">
<td th:if="${pf} == true" th:text="Passed"></td>
<td th:if="${pf} == false" th:text="failed"></td>
</th:block>
the problem is that i was naming my variable in the each loop incorrectly. The name cannot have a period in it.
I have fished up a piece of code like this :
<table class="inlineH" border="0" summary="">
<tr>
<th class="select"></th>
<th class="name">My Name </th>
<th class="description">Mob Number </th>
<th class="Job">My Job</th>
</tr>
</table>
After this , I have a for loop using which i am iterating another table in a div like this :
<%for (int x=0; x< MyNo; x++ ) {
%>
<div id="manIt">
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</div>
<% }%>
This stuff works perfectly in mozilla and gives me what i want. But when i try it out in IE, this is what happens to the code :
<table class="inlineH" border="0" summary="">
<tr>
<th class="select"></th>
<th class="name">My Name </th>
<th class="description">Mob Number </th>
<th class="Job">My Job<br/></th>
</tr/>
</table>
<%for (int x=0; x< MyNo; x++ ) {
%>
<div id="manIt">
<table>
<tr>
<td>...</td/>
<td>...</td/>
<td>...</td/>
</tr/>
</table>
</div>
<% }%>
As you can see, IE is adding an extra "/" to the closing tags: . I am using IE8.What am i doing wrong here?
Edit : Sorry about the IE version. I rechecked it, it's IE 8 .
Kindly help .
One possible solution is to use another type of tagging, such as <script type="text/javascript" src="test.js"/>, instead of <script> something </script>.
The answer to my question is partially here but, not working for me
Sending multiple parameters to servlets from either JSP or HTML
My JSP is the following
<table cellpadding = "10" border = "1">
<tr valign = "bottom">
<th align = "left" > Catalog No </th>
<th align = "left" > Chemical Name </th>
<th align = "left" > Unit </th>
<th align = "left" > Price </th>
<th align = "left" > Vendor </th>
<th align = "left" > Category </th>
<th align = "left" > Account No</th>
</tr>
<%
try
{
ArrayList<CartProduct> cp3 = (ArrayList<CartProduct>) session.getAttribute("cp");
for(CartProduct pp: cp3)
{
%>
<tr>
<td><%=pp.getCatNo()%></td>
<td><%=pp.getChemName()%></td>
<td><%=pp.getChemUnit()%></td>
<td><%=pp.getPrice()%></td>
<td><%=pp.getVendor()%></td>
<td><%=pp.getCategory()%></td>
<td><select name = "accno"><option value="--Select--">--Select--</option>
<%ArrayList<String> str=pp.getAccList();
for(String s:str)
{
%> <option value="<%=s%>"><%=s%></option>
<%
}
%>
</select></td><td>
<a href="DisplayCartServlet?catNo=<%=pp.getCatNo()%>&;accountNo=accno">Add To Cart
</a></td>
</tr>
<%
}
}
finally{
}
%>
</table>
How do I send the value of the list box to the servlet? Currently only catNo is being passed, but accountNo is null at the servlet.
The easiest way to accomplish what you are attempting is to post using a form.
<form method="post" action="DisplayCartServlet">
<input type="hidden" name="catNo" value="<%=pp.getCatNo()%>">
<select name = "accno"><option value="--Select--">--Select--</option>
<%ArrayList<String> str=pp.getAccList();
for(String s:str)
{
%> <option value="<%=s%>"><%=s%></option>
<%
}
%>
</select>
<input type="submit" value="Add To Cart">
</form>
it should be accno , it seems you are trying to retrieve param by accountNo
Also See
how-to-avoid-java-code-in-jsp-files