停止 wicket 超链接刷新页面
Stopping wicket hyperlink refreshing page
不得不重做 snippet.I 希望它现在可见。这是新代码，当您 select 一个块时，它们会更改 td 的背景颜色。现在我只需要不改变被点击的颜色。又来了。
.active{background-color:red;}
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<link rel="stylesheet" href="FNBStyle.css" type="text/css"
media="screen" title="Stylesheet" />
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]-->
<title>Help Desk Survey</title>
<style>
<!-- /* Font Definitions */
@font-face {
font-family: "Cambria Math";
panose-1: 2 4 5 3 5 4 6 3 2 4;
}
@font-face {
font-family: Calibri;
panose-1: 2 15 5 2 2 2 4 3 2 4;
}
@font-face {
font-family: Tahoma;
panose-1: 2 11 6 4 3 5 4 4 2 4;
}
/* Style Definitions */
p.MsoNormal,li.MsoNormal,div.MsoNormal {
margin: 0cm;
margin-bottom: .0001pt;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
a:link,span.MsoHyperlink {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:hover
{
background:#009999;
}
<!-- begin snippet: js hide: false -->
a:visited,span.MsoHyperlinkFollowed {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:active
{
color:black;
}
td.red-cell {
background: #F00; /* Or some other color */
}
a:hover {
background: #009999;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
p {
mso-style-priority: 99;
mso-margin-top-alt: auto;
margin-right: 0cm;
mso-margin-bottom-alt: auto;
margin-left: 0cm;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
p.MsoAcetate,li.MsoAcetate,div.MsoAcetate {
mso-style-priority: 99;
mso-style-link: "Balloon Text Char";
margin: 0cm;
margin-bottom: .0001pt;
font-size: 8.0pt;
font-family: "Tahoma", "sans-serif";
}
span.BalloonTextChar {
mso-style-name: "Balloon Text Char";
mso-style-priority: 99;
mso-style-link: "Balloon Text";
font-family: "Tahoma", "sans-serif";
}
span.EmailStyle20 {
mso-style-type: personal;
color: black;
}
span.EmailStyle21 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle22 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle23 {
mso-style-type: personal;
color: white;
}
span.EmailStyle25 {
mso-style-type: personal-reply;
color: white;
}
.MsoChpDefault {
mso-style-type: export-only;
font-size: 10.0pt;
}
@page WordSection1 {
size: 612.0pt 792.0pt;
margin: 72.0pt 72.0pt 72.0pt 72.0pt;
}
div.WordSection1 {
page: WordSection1;
}
-->
</style>
</head>
<script>
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
function myAgentFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("agent_cell" + i).style.backgroundColor = "lightgray";
}
}
</script>
<!-- <script type="text/javascript">
$( function() {
$('td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
</script> -->
<body lang=EN-ZA link=blue vlink=purple
style='margin-top: 5.0pt; margin-bottom: 5.0pt'>
<div id="HeaderContainer">
<div id="Logo"></div>
</div>
<br><br><br><br>
<form wicket:id="formSubmit">
<div class=WordSection1>
<p class=MsoNormal>
<span style='color: white'><o:p> </o:p> </span>
</p>
<div>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0
width=700 style='width: 525.0pt'>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
The Procurement Help Desk strives to deliver the highest level of service, and we would appreciate it if you could rate your most recent interaction with our agent, by selecting the appropriate score below. Your input is critical in helping us service you better. Although optional, it will assist us in understanding the service provided to you if you can provide us with comments and your details.<o:p></o:p> </span>
</p>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 1. Please rate the service of the FNB Procurement Help Desk<o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=1 cellpadding=0 width=658
style='width: 493.5pt; background: #F9F9F9; border: solid #009999 1.0pt'>
<tr>
<td style='border: none; padding: 0cm 0cm 0cm 0cm'>
<div align=center>
<table class=MsoNormalTable border=0 cellpadding=0
width="85%" style='width: 85.0%'>
<tr style='height: 114.0pt'>
<td width="40%"
style='width: 40.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Not
Likely</span> </strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(Not
good enough) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="80%" style='width: 80.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5 cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell1>
<p class=MsoNormal align=center style='text-align: center'>
<span style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<a href="#" onclick="myHelpFunction()" wicket:id="help_one"><b>
<span style='display:block; font-size: 12.0pt; color: white'>1</span> </b>
</a> <o:p></o:p>
</span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell2><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_two"><b><span
style='display:block; font-size: 12.0pt; color: white'>2</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell3><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_three"><b><span
style='display:block; font-size: 12.0pt; color: white'>3</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell4><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_four"><b><span
style='display:block; font-size: 12.0pt; color: white'>4</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell5><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_five"><b><span
style='display:block; font-size: 12.0pt; color: white'>5</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell6><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_six"><b><span
style='display:block; font-size: 12.0pt; color: white'>6</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="14%"
style='width: 14.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Likely</span>
</strong><b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>
</span> </b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>(We
can do better) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell7><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_seven"><b><span
style='display:block; font-size: 12.0pt; color: white'>7</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell8><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_eight"><b><span
style='display:block; font-size: 12.0pt; color: white'>8</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="13%"
style='width: 13.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Absolutely</span>
</strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(We
did great) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell9><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_nine"><b><span
style='display:block; font-size: 12.0pt; color: white'>9</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell10><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_ten"><b><span
style='display:block; font-size: 12.0pt; color: white'>10</span>
</b> </a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td><p></p>
</td>
</tr>
<tr>
<td></td>
<td>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 2. Please select an agent that assisted you and rate their service.<o:p></o:p> </span>
</p></td></tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'></td>
<td><select wicket:id="fromConsultants"></select></td>
</tr>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
</td>
</tr>
</table>
</div>
<p class=MsoNormal>
<o:p> </o:p>
</p>
</div>
<table>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Please Enter your details here (Optional)</td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Number:</td>
<td><input type="text" wicket:id="empNumber" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Name:</td>
<td><input type="text" wicket:id="empName" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Business Unit:</td>
<td><input type="text" wicket:id="BU" size="42" /></td>
</tr>
</table >
<table >
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Comment:</td>
</tr>
<tr>
<td> <textarea cols=90 rows=4 wicket:id="comment"></textarea></td>
</tr>
</table>
<table>
<tr>
<td><div wicket:id="feedbackPanel"></div></td>
</tr>
<tr>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
</body>
</html>
您需要使用 Wicket AjaxLink 组件。或者根本不使用 Wicket 组件。
正常（即非Ajax）Link将"refresh"该页面，因为它发送一个执行Link的#onClick()方法的请求和刷新整个页面以显示点击的结果。
您可以使用 JavaScript 来抑制 <a> 的默认行为，但是您真的需要在页面中使用 Link 吗？！您可以使用纯 JavaScript 在客户端更改颜色。使用 #renderHead(IHeaderResponse) 贡献 your.js 绑定事件侦听器并完成工作的文件。
我拿到了。
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
这是适用于颜色的最新版本。现在剩下的就是在 Wicket 中完成所有这些工作。
function myHelpFunction(link)
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 12; i++)
{
if(link >= 1 && link <=6)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF0004";
}
if(link == 7 || link ==8)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF7F00";
}
if(link == 9 || link ==10)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#709F32";
}
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
不得不重做 snippet.I 希望它现在可见。这是新代码，当您 select 一个块时，它们会更改 td 的背景颜色。现在我只需要不改变被点击的颜色。又来了。
.active{background-color:red;}
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<link rel="stylesheet" href="FNBStyle.css" type="text/css"
media="screen" title="Stylesheet" />
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]-->
<title>Help Desk Survey</title>
<style>
<!-- /* Font Definitions */
@font-face {
font-family: "Cambria Math";
panose-1: 2 4 5 3 5 4 6 3 2 4;
}
@font-face {
font-family: Calibri;
panose-1: 2 15 5 2 2 2 4 3 2 4;
}
@font-face {
font-family: Tahoma;
panose-1: 2 11 6 4 3 5 4 4 2 4;
}
/* Style Definitions */
p.MsoNormal,li.MsoNormal,div.MsoNormal {
margin: 0cm;
margin-bottom: .0001pt;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
a:link,span.MsoHyperlink {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:hover
{
background:#009999;
}
<!-- begin snippet: js hide: false -->
a:visited,span.MsoHyperlinkFollowed {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:active
{
color:black;
}
td.red-cell {
background: #F00; /* Or some other color */
}
a:hover {
background: #009999;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
p {
mso-style-priority: 99;
mso-margin-top-alt: auto;
margin-right: 0cm;
mso-margin-bottom-alt: auto;
margin-left: 0cm;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
p.MsoAcetate,li.MsoAcetate,div.MsoAcetate {
mso-style-priority: 99;
mso-style-link: "Balloon Text Char";
margin: 0cm;
margin-bottom: .0001pt;
font-size: 8.0pt;
font-family: "Tahoma", "sans-serif";
}
span.BalloonTextChar {
mso-style-name: "Balloon Text Char";
mso-style-priority: 99;
mso-style-link: "Balloon Text";
font-family: "Tahoma", "sans-serif";
}
span.EmailStyle20 {
mso-style-type: personal;
color: black;
}
span.EmailStyle21 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle22 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle23 {
mso-style-type: personal;
color: white;
}
span.EmailStyle25 {
mso-style-type: personal-reply;
color: white;
}
.MsoChpDefault {
mso-style-type: export-only;
font-size: 10.0pt;
}
@page WordSection1 {
size: 612.0pt 792.0pt;
margin: 72.0pt 72.0pt 72.0pt 72.0pt;
}
div.WordSection1 {
page: WordSection1;
}
-->
</style>
</head>
<script>
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
function myAgentFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("agent_cell" + i).style.backgroundColor = "lightgray";
}
}
</script>
<!-- <script type="text/javascript">
$( function() {
$('td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
</script> -->
<body lang=EN-ZA link=blue vlink=purple
style='margin-top: 5.0pt; margin-bottom: 5.0pt'>
<div id="HeaderContainer">
<div id="Logo"></div>
</div>
<br><br><br><br>
<form wicket:id="formSubmit">
<div class=WordSection1>
<p class=MsoNormal>
<span style='color: white'><o:p> </o:p> </span>
</p>
<div>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0
width=700 style='width: 525.0pt'>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
The Procurement Help Desk strives to deliver the highest level of service, and we would appreciate it if you could rate your most recent interaction with our agent, by selecting the appropriate score below. Your input is critical in helping us service you better. Although optional, it will assist us in understanding the service provided to you if you can provide us with comments and your details.<o:p></o:p> </span>
</p>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 1. Please rate the service of the FNB Procurement Help Desk<o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=1 cellpadding=0 width=658
style='width: 493.5pt; background: #F9F9F9; border: solid #009999 1.0pt'>
<tr>
<td style='border: none; padding: 0cm 0cm 0cm 0cm'>
<div align=center>
<table class=MsoNormalTable border=0 cellpadding=0
width="85%" style='width: 85.0%'>
<tr style='height: 114.0pt'>
<td width="40%"
style='width: 40.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Not
Likely</span> </strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(Not
good enough) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="80%" style='width: 80.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5 cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell1>
<p class=MsoNormal align=center style='text-align: center'>
<span style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<a href="#" onclick="myHelpFunction()" wicket:id="help_one"><b>
<span style='display:block; font-size: 12.0pt; color: white'>1</span> </b>
</a> <o:p></o:p>
</span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell2><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_two"><b><span
style='display:block; font-size: 12.0pt; color: white'>2</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell3><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_three"><b><span
style='display:block; font-size: 12.0pt; color: white'>3</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell4><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_four"><b><span
style='display:block; font-size: 12.0pt; color: white'>4</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell5><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_five"><b><span
style='display:block; font-size: 12.0pt; color: white'>5</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell6><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_six"><b><span
style='display:block; font-size: 12.0pt; color: white'>6</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="14%"
style='width: 14.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Likely</span>
</strong><b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>
</span> </b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>(We
can do better) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell7><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_seven"><b><span
style='display:block; font-size: 12.0pt; color: white'>7</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell8><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_eight"><b><span
style='display:block; font-size: 12.0pt; color: white'>8</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="13%"
style='width: 13.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Absolutely</span>
</strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(We
did great) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell9><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_nine"><b><span
style='display:block; font-size: 12.0pt; color: white'>9</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell10><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_ten"><b><span
style='display:block; font-size: 12.0pt; color: white'>10</span>
</b> </a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td><p></p>
</td>
</tr>
<tr>
<td></td>
<td>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 2. Please select an agent that assisted you and rate their service.<o:p></o:p> </span>
</p></td></tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'></td>
<td><select wicket:id="fromConsultants"></select></td>
</tr>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
</td>
</tr>
</table>
</div>
<p class=MsoNormal>
<o:p> </o:p>
</p>
</div>
<table>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Please Enter your details here (Optional)</td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Number:</td>
<td><input type="text" wicket:id="empNumber" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Name:</td>
<td><input type="text" wicket:id="empName" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Business Unit:</td>
<td><input type="text" wicket:id="BU" size="42" /></td>
</tr>
</table >
<table >
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Comment:</td>
</tr>
<tr>
<td> <textarea cols=90 rows=4 wicket:id="comment"></textarea></td>
</tr>
</table>
<table>
<tr>
<td><div wicket:id="feedbackPanel"></div></td>
</tr>
<tr>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
</body>
</html>
您需要使用 Wicket AjaxLink 组件。或者根本不使用 Wicket 组件。
正常（即非Ajax）Link将"refresh"该页面，因为它发送一个执行Link的#onClick()方法的请求和刷新整个页面以显示点击的结果。
您可以使用 JavaScript 来抑制 <a> 的默认行为，但是您真的需要在页面中使用 Link 吗？！您可以使用纯 JavaScript 在客户端更改颜色。使用 #renderHead(IHeaderResponse) 贡献 your.js 绑定事件侦听器并完成工作的文件。
我拿到了。
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
这是适用于颜色的最新版本。现在剩下的就是在 Wicket 中完成所有这些工作。
function myHelpFunction(link)
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 12; i++)
{
if(link >= 1 && link <=6)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF0004";
}
if(link == 7 || link ==8)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF7F00";
}
if(link == 9 || link ==10)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#709F32";
}
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}