Having problem using Ajax

Kindly see the below the link

Venus Diamond.

In this page there is Diamond DNA column. When you click on the images of Diamond DNA column the next row which was hidden while show the content of another jsp page which is index1.jsp .

Now we have a requirement of using tooltip on the image which is on index1.jsp but we are unable to do so and the content of tooltip is displaying below the image.

Regards

Sapan Shah

How is the tooltip contents available on index1.jsp? Is it part of JSP (hard coded) or being pulled from database?

It is hard coded.

After little bit of debugging, it looks like, image and the tool tip text both are on index1.jsp. Why don't you use 'title' attribute of <img> tag.

I cannot use title because the content contains <br/> tag . For example :- This is first line.<br/>This is second line.

Sapan Shah wrote:I cannot use title because the content contains <br/> tag

And you can not remove <br>? Also, tool tip supposed to be short.

The tooltip content contains max 10 lines and on every line there will be max 30 characters.That's why after 30 character there will be <br/> tag which breaks the line.

Sapan Shah wrote:The tooltip content contains max 10 lines and on every line there will be max 30 characters.That's why after 30 character there will be <br/> tag which breaks the line.

Is this supposed to be tooltip or tool description. Anyways, you can call a javascript function on mouseover event which will render a floating div tracking mourse position having your tooltip text.

I have tried doing the same way has you said but it is not working.

index.jsp

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>index</title>
    <style type="text/css">
     .hideme {display:none;

}
.showme {display:table-row;}
    </style>
  <script type="text/javascript">

function makeQdnaAlert(url,sid)
{

if(document.getElementById('qukdna_'+sid).value=='false')
{
 
 document.getElementById('trquikdna_'+sid).className="showme";
document.getElementById('qukdna_'+sid).value='true';
document.getElementById('div_qucik_dna_'+sid).style.display='block';
document.getElementById('div_qucik_dna_'+sid).innerHTML = IO(url); 
  
  }
else
{

document.getElementById('trquikdna_'+sid).className="hideme";
document.getElementById('qukdna_'+sid).value='false';
document.getElementById('div_qucik_dna_'+sid).style.display='none';
}
}

function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    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;
   
 //   alert(text);
   
   
return text;
}

</script> 
  </head>
  <body>
   <table border="1">
   <tr>
     <td><strong>Packet Number</strong></td>
     <td><strong>Lab</strong></td>
     <td><strong>Diamond DNA</strong></td>
     <td><strong>Shape</strong></td>
     <td><strong>Size</strong></td> 
   </tr>
   <tr><td colspan="5"> </td></tr>
   <tr>
      <td>40061019</td>
      <td>IGI</td>
      <td><table border="0" width="100%" onclick="javascript:makeQdnaAlert('<%=request.getContextPath()%>/index1.jsp?pkt=40061019','40061019')"> 
        <tr>
         <td width="50%" align="left"><img src="images/dot-com-btn.gif" alt="Venus" height="20px" width="35px"></td>
         <td width="50%" align="left"><img src="images/dw-btn.gif" alt="Venus" height="20px" width="35px"></td>
        </tr>
       </table> 
       </td>
      <td>Round</td>
      <td>10.09</td> 
   </tr>
   <tr id="trquikdna_40061019" class="hideme"><td colspan="5">
    <input type="hidden" name="qukdna" id="qukdna_40061019" value="false" />
     <div id="div_qucik_dna_40061019"></div>
   </td></tr>
   <tr>
      <td>123456</td>
      <td>GIA</td>
      <td></td>
      <td>Round</td>
      <td>10.1</td> 
   </tr>
   <tr>
      <td>40390289</td>
      <td>IGI</td>
      <td><table border="0" width="100%" onclick="javascript:makeQdnaAlert('<%=request.getContextPath()%>/index1.jsp?pkt=40390289','40390289')"> 
        <tr>
         <td width="50%" align="left"><img src="images/dot-com-btn.gif" alt="Venus" height="20px" width="35px"></td>
         <td width="50%" align="left"><img src="images/dw-btn.gif" alt="Venus" height="20px" width="35px"></td>
        </tr>
       </table> 
       </td>
      <td>Round</td>
      <td>9.00</td> 
   </tr>
   <tr id="trquikdna_40390289" class="hideme"><td colspan="5">
    <input type="hidden" name="qukdna" id="qukdna_40390289" value="false" />
     <p id="div_qucik_dna_40390289"></p>
   </td></tr>
    </table>
  </body>
</html>

and index1.jsp

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>Ajax Testing</title>
    <script type="text/javascript" language="javascript">
      function call_shw(pkt)
       {
        document.getElementById("tooltip_"+pkt).display='none';
       }
    </script>
  
 <link href="css/SpryTooltip.css" rel="stylesheet" type="text/css">
 <script src="js/SpryTooltip.js" type="text/javascript" language="javascript"></script>
     
  </head>
  <body>
  
  
    <table border="0">
     <tr> 
     <td><div id="trigger"><a class="showTip el2" href="#">
     <img id="<%=request.getParameter("pkt")%>" alt="" onmouseover="call_shw('<%=request.getParameter("pkt")%>')" src="http://www.venusjewel.com/plotimg/<%=request.getParameter("pkt")%>T.png" title="" width="200" height="200" alt="Plotting">
       </a>
       </div>
      <div  id="tooltip_<%=request.getParameter("pkt")%>">This is the tooltip element.</div>
     </td>
     <td><img src="http://www.venusjewel.com/plotimg/<%=request.getParameter("pkt")%>B.png" title="" width="200" height="200" alt="Plotting"></td>
    </tr>
   </table> 
   <script type="text/javascript">
var tt1 = new Spry.Widget.Tooltip("tooltip","#trigger");
</script>
   
  </body>
</html>

Sapan Shah wrote:I have tried doing the same way has you said

It does not look like that way. What does call_shw() function do? Where is the function that creates tooltip.

Sapan Shah wrote:but it is not working.

'It is not working' does not help anyway. Separate out the problem and paste specific code here.