How do I convert html to pdf with grails rendering? - grails

I have the following template:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
I am using
ByteArrayOutputStream bytes = pdfRenderingService.render(template: "/templates/offers", model: [poos:poos, tasks:tasks, skus:skus])
But it is throwing errors like:
org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 3; The markup in the document preceding the root element must be well-formed.
What can I do to make this work? I already made some reseach and I find this being something about XML formatting but I can't figure what is wrong. Already went to xHTML validator...
Can someone please help me to figure out how can I make this rendering work? What am I doing wrong?
(If this is exclusively to Grails Rendering, are there other html to pdf libs that I can use? )
Thanks in advance!


Grails Rendering Plugin - Reference Documentation
You must declare DOCTYPE at the start of your GSP like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So your template will be _offers.gsp like follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
Hope this helps you

Related

Wanted to make it 2 rows & 2 columns but end up getting weird response

<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</section>
</th>
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</table>
</th>
</tr>
I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.
result:

You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.
The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.
tr, th {
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}
header.span {
font-size: 20px;
font-family: Lora;
}
th {
mso-line-height-rule: exactly;
border-radius: 1px;
padding-top: 50px;
padding-bottom: 20px;
/* padding-left: 30px;
padding-right: 200px; */
}
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header class="span"><span class="span">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<tr>
<th class="earn points"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<th class="get rewarded"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</tr>
<section class="col-1-2">
<tr>
<th class="early access"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</tr>
</section>
</table>
</th>
</tr>

I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:
<table>
<tr>
<td>Company</td>
<td>Contact</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
</table>
Here some mistake:
The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.
Here is the solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<tr id="section-6465178" class="section loyalty">
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<section class="col-1-2">
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</section>
</tr>
<tr>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</tr>
</table>
</body>
</html>
If it keeps getting messy then the problem is in your css file. I hope it helped you :)

Jquery UI sortable with table

Consider the following image.
In the following image, rows are divided as a section of few rows.
I have implemented the Jquery UI sortable with the table but by that, any row can be inserted anywhere in the table.
What I want is, rows can only be sortable within their specific section, for example, a row of one section should not insert in section 2.
So I'm looking for something like validation on jumping say, a row cannot jump another row with a specific class or let me know something else.
Below is the piece of code for jquery.
$(function(){
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items:".tbl_row_4", /*tbl_row_4 - class of rows in yellow color*/
cursor:"move"
});
});
Below is code to produce sample html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered tbl_style " id="etemplate_table_id">
<thead>
<tr class="tbl_row_head" "="">
<th>M</th>
<th>W</th>
<th>A</th>
<th>Detailed Description</th>
<th>R-Class</th>
<th>B-Class</th>
<th>E-Category</th>
<th>ML-Category</th>
<th>Labor Rate</th>
<th>QTY</th>
<th>UOM</th>
<th>Duration</th>
<th>Crew Size</th>
<th>Unit Mhrs.</th>
<th>Total Mhrs.</th>
<th>Phase</th>
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr class="tbl_row_1" id="H0111">
<td>01</td>
<td colspan="8" class="left_align">House # 109, Vienna Andre</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr class="tbl_row_2" id="01_01-tbl_row_2" name="W002">
<td>01.01</td>
<td colspan="8" class="left_align wbs_master_list_td">Head & Trauma Pt</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1066">
<td></td>
<td class="cell_grp_brown">01.01.03</td>
<td>1066</td>
<td class="no_wrap_class">Develop Tower Near Yellow East River</td>
<td>DATA1</td>
<td>OM_CL</td>
<td>110100</td>
<td>Contractor</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>LS</td>
<td class="duration_cell">9 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>2</td><td>0</td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1259">
<td></td>
<td class="cell_grp_brown">01.01.04</td>
<td>1259</td>
<td class="no_wrap_class">Install Marron Wire M001</td>
<td>PCC-1</td>
<td>ME_CL</td>
<td>130100</td>
<td>Testing & Commissioning</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>Days</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>3</td><td>0</td></tr><tr class="tbl_row_10" id="01_01-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Head & Trauma Pt</td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_02-tbl_row_2" name="W003">
<td>01.02</td>
<td colspan="8" class="left_align wbs_master_list_td">Base Alm 17 SO</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_10" id="01_02-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Base Alm 17 SO</td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_03-tbl_row_2" name="W004">
<td>01.03</td>
<td colspan="8" class="left_align wbs_master_list_td">Body Mixed & //le </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1000">
<td></td>
<td class="cell_grp_brown">01.02.01</td>
<td>1000</td>
<td class="no_wrap_class">Map of Blue carousel</td>
<td>CVENG</td>
<td>NON O & M</td>
<td>140100</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">1 day</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1001">
<td></td>
<td class="cell_grp_brown">01.02.02</td>
<td>1001</td>
<td class="no_wrap_class">Blue Tire Removal</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1002">
<td></td>
<td class="cell_grp_brown">01.02.03</td>
<td>1002</td>
<td class="no_wrap_class">Jet Blue Service A</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">3 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1003">
<td></td>
<td class="cell_grp_brown">01.02.04</td>
<td>1003</td>
<td class="no_wrap_class">Air Pressure Blue Pin</td>
<td>TRENG</td>
<td>Indirect</td>
<td>180100</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">4 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="12" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1004">
<td></td>
<td class="cell_grp_brown">01.02.05</td>
<td>1004</td>
<td class="no_wrap_class">Blue Tax Appraisal For Marty James</td>
<td>TRENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="122" type="text"></td></tr><tr class="tbl_row_10" id="01_03-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Body Mixed & //le </td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>$1634</td>
</tr>
</tbody>
</table>
</div>
Below is the css code for this :
.estimatigPortfolioOverview_row_1, .estimatigPortfolioOverview_row_5_right{
border: 1px solid black;
padding: 10px;
}
.estimatigPortfolioOverview_row_5_right,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4, .estimatigPortfolioSplit_row_4{
margin-top: 10px;
}
.estimatigPortfolioOverview_row_1 td:nth-child(odd){
font-size: 13px;
}
.estimatigPortfolioOverview_row_1 input[type="text"]{
font-size: 11px;
width: 110px;
}
.estimatigPortfolioOverview_row_1 input[type="checkbox"]{
margin-left: 5px;
}
.estimatigPortfolioOverview_row_1_div_3, .estimatigPortfolioOverview_row_3,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4_col_2 table, .estimatigPortfolioSplit_row_4_col_3 table{
border: 1px solid black;
}
.estimatigPortfolioOverview_row_1 td, .estimatigPortfolioOverview_row_1 th, .estimatigPortfolioIchrs_row_4 td, .estimatigPortfolioIchrs_row_4 th, .estimatigPortfolioSplit_row_4 td, .estimatigPortfolioSplit_row_4 th{
border: none !important;
}
.estimatigPortfolioOverview_row_3 label,.estimatigPortfolioOverview_row_5_left .form-group label,.estimatigPortfolioSplit_row_2 label,.estimatigPortfolioIchrs_row_2 label{
margin-right: 10px;
}
.estimatigPortfolioOverview_row_5_left li label{
margin-left: 10px;
}
.estimatigPortfolioOverview_row_4 ul li{
border-left: 1px solid black;
}
.estimatigPortfolioOverview_row_4 ul li:first-child{
border: none;
}
.estimatigPortfolioOverview_row_4 ul li:first-child input{
margin-left: 10px;
}
.estimatigPortfolioOverview_row_3_4_hr,.estimatigPortfolioIchrs_row_2_3_hr{
border: 4px solid #b4b40f;
}
.estimatigPortfolioOverview_row_5_right_2, .estimatigPortfolioOverview_row_7_col_1{
border: 1px solid black;
text-align: center;
}
.estimatigPortfolioOverview_row_7_col_1{
padding: 10px;
}
.estimatigPortfolioOverview_row_6{
margin:10px;
}
.estimatigPortfolioOverview_row_6 button, .estimatigPortfolioIchrs_row_3_footer_button_row button{
border: 1px solid #351f72;
color: #351f72;
background-color: #e9b947;
padding: 0px 20px;
margin-top: 5px;
}
.estimatigPortfolioOverview_row_6, .estimatigPortfolioIchrs_row_3_footer_button_row{
text-align: center;
}
.estimatigPortfolioIchrs_row_3_footer_button_row{
margin: 15px 0px;
}
.padding_less{
padding: unset;
}
.estimatigPortfolioSplit_row_2 span{
font-size: 16px;
font-weight: bold;
color: #e3960a;
}
.estimatigPortfolioSplit_row_3, .estimatigPortfolioOverview_row_3{
margin-top: 20px;
}
.estimatigPortfolioSplit_row_3 table th{
padding: unset;
font-size: 13px;
}
.estimatigPortfolio_top_row li{
float: right;
margin: 10px;
}
.estimatigPortfolioIchrs_row_3{
border: 3px solid #ccc1c1;
}
.glyphicon-one-fine-empty-dot::before{
content: "\25cf";
}
.main_row{
display: block;
font-size: 20px;
font-weight: bold;
margin: 0px;
}
.glyphicon-one-fine-empty-dot{
font-size: 30px;
padding-right: 5px;
}
.glyphicon_dot_1{
color: #daa50f;
}
.glyphicon_dot_2{
color: #8c7dda;
}
.glyphicon_dot_3{
color: #ec3434;
}
.sub_row .glyphicon-plus{
font-size: 12 !important;
margin-right: 12px !important;
color: #000000 !important;
}
.sub_row{
width: 90%;
margin: 3px 6%
}
.sub_row div:first-child{
font-size: 16px;
margin-left: -3%;
color: #0ca6d8;
}
.sub_row .sub_row_right_div{
display: inline-block;
float: right;
text-align: center;
font-size: 12px !important;
margin-right: 15px;
}
.sub_row .sub_row_right_div span:first-child{
text-decoration: underline;
color: #782828 !important;
}
.estimatigPortfolioIchrs_row_3_col_1, .estimatigPortfolioSplit_row_3_col_1{
overflow-y: scroll;
max-height: 350px;
}
.estimatigPortfolioIchrs_row_3_col_1 table th{
font-size: 14px;
}
.estimatigPortfolioIchrs_row_3_col_1 td{
font-size: 13px;
}
.eselection_form{
margin-left: 20px;
}
.estimatigPortfolioOverview_row_4 .list-inline{
overflow-x: scroll;
padding: 15px 0px !important;
}
.tbl_row_head, .tbl_row_1, .tbl_row_10{
background-color: #3399CC;
}
.tbl_row_1{
color: #ffffff;
font-weight: bold;
}
.tbl_row_head th{
white-space: pre;
}
.tbl_row_head th{
font-weight: normal;
}
.ips_template_table_col .table-responsive{
max-height: 600px;
overflow: scroll;
}
.tbl_row_10{
font-size: 12px;
font-weight: bold;
}
.tbl_row_2{
background-color: #E6EDE2;
}
.tbl_row_3, .tbl_row_9{
background-color: #CCDD90;
}
.tbl_row_4, .tbl_row_5, .tbl_row_6, .tbl_row_7, .tbl_row_8, .tbl_row_9{
background-color: #f3f2c1;
}
.tbl_style tr:not(.tbl_row_1):not(.tbl_row_2):not(.tbl_row_10) td:nth-child(2){
background-color: #EEDDDC;
}
.tbl_style tr:not(.tbl_row_1):not(.tbl_row_10) td:nth-child(1){
background-color: #E6EDE2 !important;;
}
.tbl_style > tbody > tr > td, .tbl_style > tbody > tr > th, .tbl_style > tfoot > tr > td, .tbl_style > tfoot > tr > th, .tbl_style > thead > tr > td, .tbl_style > thead > tr > th {
border: 1px solid #000000;
}
.ips_template_table_col{
background-color: #fcfcf1;
padding: 20px;
}
.estimatigPortfolioIchrs_row_4_col_1 table, .estimatigPortfolioSplit_row_4_col_2 table{
font-size: 16px;
}
.estimatigPortfolioIchrs_row_4_col_1 select, .estimatigPortfolioSplit_row_4_col_2 select{
width:90%;
}
.estimatigPortfolioIchrs_row_4_col_2 table:not(a), .estimatigPortfolioSplit_row_4_col_3 table input[type="text"]{
font-size: 13px;
}
.estimatigPortfolioIchrs_row_4_col_2 tr:first-child input, .estimatigPortfolioSplit_row_4_col_3 tr:first-child input{
width:90%;
}
.estimatigPortfolioIchrs_row_4_col_2 tr:last-child input, .estimatigPortfolioSplit_row_4_col_3 tr:last-child input{
width:95%;
}
.estimatigPortfolioIchrs_row_4_col_2 table a, .estimatigPortfolioSplit_row_4_col_3 table a{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
.estimatigPortfolioIchrs_row_4_col_2 table .vertical_align, .estimatigPortfolioSplit_row_4_col_3 .vertical_align{
vertical-align: bottom;
}
.estimatigPortfolioIchrs_row_4_col_3 table{
font-size: 12px;
}
.estimatigPortfolioIchrs_row_4_heading_div, .estimatigPortfolioSplit_row_4_heading_div, .overview_master_list_estimate_modal_heading_div{
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 20px 0px;
}
.estimatigPortfolioIchrs_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span{
border: 1px solid black;
padding: 2px 10%;
}
.estimatigPortfolioSplit_row_4_heading_div span{
border: 1px solid black;
padding: 2px 2%;
}
.estimatigPortfolioSplit_row_4_col_4 table{
font-size: 15px;
}
.estimatigPortfolioSplit_row_4_col_4 thead, .estimatigPortfolioIchrs_row_4_col_3 thead{
border-top: 5px solid #64afe7;
border-bottom: 5px solid #64afe7;
}
#split_testing_commissioning_modal .modal-dialog, #ichrs_non_incremental_cost_modal .modal-dialog, #overview_master_list_estimate_modal .modal-dialog{
width: 85% !important;
}
.modal_table_scroll{
max-height: 40%;
overflow-y: scroll;
}
.etemplate_btn_div{
text-align: center;
margin: 25px 0px 10px 0px;
}
.etemplate_btn_div button{
padding: 0px 10px;
}
.estimatigPortfolioOverview_row_1 table{
margin-bottom: unset;
}
.estimatigPortfolioOverview_row_1_div_0_tbl_pid, .estimatigPortfolioOverview_row_1_div_0_tbl_pin{
margin-left: 13%;
}
#media (max-width: 991px){
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
margin-left: 3%;
}
.estimatigPortfolioSplit_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span, .estimatigPortfolioIchrs_row_4_heading_div span{
display: block;
white-space: normal;
}
}
#media (min-width: 992px){
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name input[type="text"]{
width: 100%;
}
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
margin-left: -5%;
}
}
.estimatigPortfolioOverview_row_1_div_3{
padding: 1% 0px;
margin-top: 8px;
}
.estimatigPortfolioOverview_row_1_div_2 select, .estimatigPortfolioOverview_row_1_div_3 select{
width: 70px;
}
#header_div_checkbox{
margin-bottom: 20px;
}
#header_div{
display: none;
}
.master_list_est_row_1_col_1 .table-responsive{
max-height: 400px;
overflow: scroll;
}
#master_excel_file{
display: none;
}
.master_list_est_row_1_col_2{
text-align: center;
}
.left_align, .tbl_row_4 td{
text-align: left;
}
#master_list_modal_on_template .modal-dialog{
width: 85%;
}
.right_align{
text-align: right;
}
.no_wrap_class{
white-space: nowrap;
}
.tbl_row_2 td:nth-child(2){
padding-left: 70px;
}
.tbl_row_3 td:nth-child(2), .tbl_row_4 td:nth-child(2){
padding-left: 100px;
}

Upon testing, I could see no major issues with the code. I did find a few HTML Syntax issues that you should work to correct. Like:
<tr class="tbl_row_head" "="">
This will cause issues.
My testing: https://jsfiddle.net/Twisty/gz28vdbx/1/
JavaScript
$(function() {
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items: "* > .tbl_row_4",
/*tbl_row_4 - class of rows in yellow color*/
cursor: "move"
});
});
I was able to sort just the rows that were .tbl_row_4 without issue.
Hope this helps.

iPad email template issue

So, I have this html email:
<!Doctype HTML><html>
<head>
<!-- Meta -->
<meta charset="utf-8">
</head>
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;">
<tr class="header">
<td class="logo" style="padding-top: 10px; padding-left: 20px;">
<img src="header_logo.png" alt="Logoimage"/>
</td>
</tr>
</table>
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;">
<tr style="width: 100%; display: block;">
<td style=""><h2>Congratulations on your new website!</h2></td>
<td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;">
General description here.. write whatever you want.
</td>
</tr>
<tr style="width: 100%; display: block;">
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td>
<td class="content" style="margin-top:20px; width:100%; display: block;">
<h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3>
<h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3>
<h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3>
<h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3>
</td>
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td>
<td class="content" style="margin-top:20px; width: 100%; display: block;">
<h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3>
<h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3>
<h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3>
<h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3>
<h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3>
<h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
<h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
</td>
</tr>
<tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;">
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td>
<td class="content" style="margin-top:20px; display: block;">
<h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3>
<h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3>
<img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/>
</td>
</tr>
</table>
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;">
<tr class="copyright">
<td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">© 2013</td>
</tr>
</table></html>
And it displays as I want (full width table cells) on major email clients - Gmail, Thunderbird, Gmail app for android, but when using the email app from iPad it does not work ok..it does not "take" the 100% width and puts all the table cells in a row. I know I could solve this by easily adding every cell in a separate row but I don't want this unless there is no other solution.
Do you have any ideea why this is happening?
I can't figure it why.
it should look something like this: http://jsfiddle.net/6YqmL/1/

Header tags are not consistently supported in html-email. instead of using <h3>, try styling them in the table cell or a font tag and use double <br> to separate them.

Jenkins: How do I add the most recent Perforce changelist into notification emails?

I have a Jenkins CI setup, and we are using Perforce as our SCM.
I have configured the Email-ext plugin to notify developers when a build breaks, and also when it is fixed.
At the moment the notification email body just uses the $DEFAULT_CONTENT, but I would really like to indicate the most recent Perforce changelist into the email content as this would be more helpful to the developers.
I'm thinking Changelist number, Changelist title and Committer.
Any ideas on how to do this?

Somewhere on the jenkins mailing list I found this template which I think does what you want.
Create a folder "email-templates" in your jenkins root directory, put the file in there and name it "p4htmlmail.jelly".
Then in your jenkins configuration put ${JELLY_SCRIPT,template="p4htmlmail"} in the DEFAULT_CONTENT field of the email-ext plugin configuration.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/style.css"/>
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/color.css"/>
<STYLE>
a:link,a:visited {
text-decoration: underline;
<!--color: #3B5998;-->
color: #8B9DC3
}
a.success:link,a.success:visited {
text-decoration: underline;
color: #338033;
}
a.failure:link,a.failure:visited {
text-decoration: underline;
color: #900;
}
a.unstable:link,a.unstable:visited {
text-decoration: underline;
color: #F0C000;
}
<!--
body {
background-color: #DFE3EE;
}-->
.pane {
margin-top: 4px;
white-space: nowrap;
}
.pane TD {
padding: 4px 4px 3px 4px;
}
TABLE.pane {
width: 100%;
border: none;
}
TD.style1 {
color: #3B5998;
width: 10%;
}
TD.pane {
padding: 3px 4px 3px 4px;
vertical-align: middle;
}
TD.pane-header {
border-top: 1px #8B9DC3 solid;
border-bottom: 1px #8B9DC3 solid;
background-color: #DFE3EE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #8B9DC3;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-success {
border-top: 1px #338033 solid;
border-bottom: 1px #338033 solid;
background-color: #E0FFE0;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #338033;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-failure {
border-top: 1px #900 solid;
border-bottom: 1px #900 solid;
background-color: #FCC;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #900;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-unstable {
border-top: 1px #F0C000 solid;
border-bottom: 1px #F0C000 solid;
background-color: #FFFFCE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #F0C000;
padding-top: 10px;
padding-bottom: 10px;
}
TH.pane {
font-weight: bold;
}
SPAN.style1 {
font-weight: bold;
color: #8B9DC3;
}
SPAN.success {
color: #338033;
}
SPAN.failure {
color: #900;
}
LI.style1 {
list-style: cirle outside;
}
LI.failure {
list-style: cirle outside;
color: #900;
}
</STYLE>
<BODY>
<j:set var="spc" value="&nbsp;&nbsp;" />
<!-- GENERAL INFO -->
<TABLE class="pane">
<TBODY>
<TR>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<TD colspan="2" class="pane-header-success">
<SPAN>Build Result Summary - <A class="success" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<TD colspan="2" class="pane-header-failure">
<SPAN>Build Result Summary - <A class="failure" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:otherwise>
<TD colspan="2" class="pane-header-unstable">
<SPAN>Build Result Summary - <A class="unstable" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:otherwise>
</j:choose>
</TR>
<TR>
<TD class="style1">Project:</TD>
<TD>${project.name}</TD>
</TR>
<TR>
<TD class="style1">Completion:</TD>
<TD>${it.timestampString}</TD>
</TR>
<TR>
<TD class="style1">Duration:</TD>
<TD>${build.durationString}</TD>
</TR>
<TR>
<TD class="style1">Status:</TD>
<TD>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/blue.png"/>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/red.png"/>
</j:when>
<j:otherwise>
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/yellow.png"/>
</j:otherwise>
</j:choose>
${build.result}
</TD>
</TR>
<TR>
<TD class="style1">Help:</TD>
<TD>
Help text goes here.
</TD>
</TR>
</TBODY>
</TABLE>
<BR/>
<!-- CHANGE SET -->
<j:set var="changeSet" value="${build.changeSet}" />
<j:if test="${changeSet!=null}">
<j:set var="hadChanges" value="false" />
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Code Changes - See full change details</SPAN>
</TD>
</TR>
<j:forEach var="cs" items="${changeSet}" varStatus="loop">
<j:set var="hadChanges" value="true" />
<j:set var="aUser" value="${cs.hudsonUser}"/>
<TR>
<TD colspan="2">
<SPAN class="style1">
Change <B>${cs.changeNumber}</B> by
<B>${aUser!=null?aUser.displayName:cs.author.displayName}: </B>
'${cs.msgAnnotated}'
</SPAN>
</TD>
</TR>
<j:forEach var="p" items="${cs.affectedFiles}">
<TR>
<TD width="2%">
<j:switch on="${p.editType.name}">
<j:case value="add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-ADD.gif"/>
</j:case>
<j:case value="branch">
<IMG SRC="${rooturl}plugin/perforce/icons/action-BRANCH.gif"/>
</j:case>
<j:case value="delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-DELETE.gif"/>
</j:case>
<j:case value="edit">
<IMG SRC="${rooturl}plugin/perforce/icons/action-EDIT.gif"/>
</j:case>
<j:case value="import">
<IMG SRC="${rooturl}plugin/perforce/icons/action-IMPORT.gif"/>
</j:case>
<j:case value="integrate">
<IMG SRC="${rooturl}plugin/perforce/icons/action-INTEGRATE.gif"/>
</j:case>
<j:case value="move_add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_ADD.gif"/>
</j:case>
<j:case value="move_delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_DELETE.gif"/>
</j:case>
<j:default>
${p.editType.name}
</j:default>
</j:switch>
</TD>
<TD><SPAN>${p.path}</SPAN></TD>
</TR>
</j:forEach>
</j:forEach>
<j:if test="${!hadChanges}">
<TR><TD colspan="2">No Changes</TD></TR>
</j:if>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- JUNIT TEST OUTPUT -->
<j:set var="junitResultList" value="${it.JUnitTestResult}" />
<j:if test="${junitResultList.isEmpty()!=true}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Unit Tests - See full test details</SPAN>
</TD>
</TR>
<j:forEach var="junitResult" items="${it.JUnitTestResult}">
<j:forEach var="packageResult" items="${junitResult.getChildren()}">
<TR>
<TD>
Name: ${packageResult.getName()}, Failed: <SPAN class="failure">${packageResult.getFailCount()}</SPAN> test(s), Passed: <SPAN class="success">${packageResult.getPassCount()}</SPAN> test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)
</TD>
</TR>
<j:forEach var="failed_test" items="${packageResult.getFailedTests()}">
<TR>
<TD>
<UL>
<B>
<LI class="failure">Failed: ${failed_test.getFullName()}</LI>
</B>
</UL>
</TD>
</TR>
</j:forEach>
</j:forEach>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- CONSOLE OUTPUT -->
<j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result"/>
<j:if test="${build.result==resultFailure}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Console Output - See full console details</SPAN>
</TD>
</TR>
<j:forEach var="line" items="${build.getLog(100)}">
<TR>
<TD>${line}</TD>
</TR>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
</BODY>
</j:jelly>

Set value of an input box from part of url

ok so i have this address for a part of my website,
localhost:2001/?botid=Alice&template=alice
and i want to make it so what i put after that will be put into the input box on the page. So something like this,
localhost:2001/?botid=Alice&template=alice#Hello
how are you?
can anyone help out with a javascript or something?
heres the source code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--This is a simple example of an HTML chat template for Program D.-->
<head>
<!--The value associated with a bot predicate, such as
"name", is inserted wherever you use a bot element
with a name attribute that corresponds to a predicate name.-->
<title>
Dialogue with <bot name="name"/>
</title>
<!--This is a simple stylesheet to format the page.-->
<style type="text/css">
html
{
overflow: hidden;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 10px;
text-align: left;
background: transparent;
}
.fieldlabel
{
font-weight: bold;
font-style: normal;
font-size: 14px;
color: #0000aa;
}
#userinput
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #aa0000;
}
.botresponse
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #00aa00;
}
.bottomtext
{
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-style: italic;
font-size: 10px;
}
li p
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
}
ul
{
margin-top: 0px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
form
{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
#audio
{
display: none;
}
</style>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('audio')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.play();
}
</script>
<script type="text/javascript">
document.getElementById('text')[0].value = window.location.hash.substring(1);
</script>
</head>
<!--The body element is set to automatically give focus to the
input field each time the document is loaded.-->
<body>
<table border="0" cellspacing="5" cellpadding="0" width="500">
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
You said:
</p>
</td>
<td width="70%" valign="top">
<p id="userinput">
<userinput/>
</p>
</td>
</tr>
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
<!--The name of the bot will be substituted here.-->
<bot name="name"/> said:
</p>
</td>
<td width="70%" valign="top">
<p class="botresponse">
<!--The bot's response will be substituted here.-->
<reply></reply><response/>
</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<form method="post">
<input type="text" size="50" name="text" id="text" onkeydown="if (event.keyCode == 190) document.getElementById('go').click()" x-webkit-speech />
<input type="submit" id="go" value="Say" />
</form>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<p class="bottomtext">
<!--Again we display the bot name, and also the hostname.-->
You are speaking with <bot name="name"/> from <hostname/>.
</p>
<p class="bottomtext">
<!--Here is an example of getting another bot predicate value (master).-->
<bot name="name"/>'s botmaster is <bot name="master"/>.
</p>
<p>
You can:
</p>
<ul>
<li>
<p>
<!--This link will request a login form.-->
log in.
</p>
</li>
<li>
<p>
<!--This link will request a new user registration form.-->
register a new username and password.
</p>
</li>
</ul>
</td>
</tr>
</table>
<audio id="audio" onended="document.forms[0].elements[0].focus();" controls="controls" autoplay="autoplay" src="http://translate.google.com/translate_tts?tl=en&q=><response/>" type="audio/mpeg"></audio>
</body>
</html>

With jQuery:
$('input').val(window.location.hash.substring(1));
Without jQuery:
document.getElementsByTagName('input')[0].value = window.location.hash.substring(1);
Either way, you have to make sure the DOM is loaded. If you want to unescape it, use decodeURIComponent E.g.:
window.addEventListener("load", function()
{
document.getElementsByTagName('input')[0].value = decodeURIComponent(window.location.hash.substring(1));
}, false);

window.location = window.location + '#' + document.getElementById('inputbox').text;

Resources