I have two .jsp pages and Also we are using SpryTooltip.js and SpryTooltip.css i.e: this files are used for tooltip purpose on images.
1) rslt.jsp
2) search.jsp
Code for rslt.jsp is
<head>
<script type="text/javascript" language="javascript">
function alrt(url,nos)
{
if(document.getElementById('dna_'+nos).value=='false')
{
document.getElementById('srch_'+nos).className="showme";
document.getElementById('dna_'+nos).value='true';
document.getElementById('div_dna_'+nos).style.display='block';
document.getElementById('div_dna_'+nos).innerHTML = IO(url);
}
else
{
document.getElementById('srch_'+nos).className="hideme";
document.getElementById('dna_'+nos).value='false';
document.getElementById('div_dna_'+nos).style.display='none';
}
}
function IO(U, V) {
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html');
X.send(V ? V : '');
var text= X.responseText;
return text;
}
</script>
</head>
<body>
<table>
<% for(int i=0;i<10;i++) { %>
<tr><td><img src="/image/go.gif" onclick="onclick="javascript:alrt('<%=request.getContextPath()%>/sear ch.jsp?nm=<%=i%>,'<%=i%>');return false;""></td></tr>
<tr class="hideme" id="srch_<%=i%>">
<td>
<input type="hidden" id="dna_<%=i%>" value="false">
<div id="div_dna_<%=i%>"></div>
</td>
</tr>
<%}%>
</table>
</body>
Code for search.jsp is as follows
<head>
<link href="css/SpryTooltip.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/SpryTooltip.js" language="javascript">
</head>
<%
String nm=request.getParameter("nm")!=null?request.getParameter("nm"):"";
%>
<table width="60%" class="tableborder_br" >
<tr>
<td width="25%" align="left">
<div class="trigger1">
<a href="#"">
<img src="images/img/<%=nm%>.png" title="" width="200" height="200" class="buttons"/></a>
</div>
<div id="tooltip" class="tooltipContent" style="bgcolor:#FFFFFF"><%=nm%></div>
<script type="text/javascript">
var tt1 = new Spry.Widget.Tooltip("tooltip",".trigger1",{offsetX: "10px", offsetY: "-10px"});
</script>
The problem is that when we click on go.gif image in rslt.jsp ,the next row which has class="hide" will be display class="show" and on that row nm.png will display from search.jsp because of Ajax used in function IO.
But when I used SpryTooltip.js and SpryTooltip.css in search.jsp tooltip doesn't work.
