How to remove content displayed on browser during ajax call?

**Man4ish** · Dec 30 '11, 07:37 AM

Hi,

I am fetching mysql database by jsp via ajax.I am calling jsp from ajax function for database access and display the content in popup window. It is working fine. But when i mouse over the text i am getting content gets printed on web page too.

ajax.js

Code:

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


function loadContent(str)
{

 xmlhttp=GetXmlHttpObject();

  if (xmlhttp==null)
  {
   alert ("Your browser does not support Ajax HTTP");
   return;
  }

    var url="loadJSP.jsp";
    url=url+"?q="+str;

    xmlhttp.onreadystatechange=getOutput;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}

function getOutput()
{
  if (xmlhttp.readyState==4)
  {
        document.getElementById("prtCnt").innerHTML=xmlhttp.responseText;
        popup(document.getElementById("prtCnt").innerHTML,'yellow');
  }
}

function GetXmlHttpObject()
{
    if (window.XMLHttpRequest)
    {
       return new XMLHttpRequest();
    }
    if (window.ActiveXObject)
    {
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
 return null;
}

/////////////////////////////////////////////////////////////////////////

//Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net,  http://website.lineone.net/~mike_mcgrath))
//Permission granted to Dynamicdrive.com to include script in archive
//For this and 100's more DHTML scripts, visit http://dynamicdrive.com

Xoffset=-60;    // modify these values to ...
Yoffset= 20;    // change the popup position.

var old,skn,iex=(document.all),yyy=-1000;

var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all

if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;

function popup(msg,bak){
var content="<TABLE  WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
 if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
 if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
 if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}

function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}

function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

Index.jsp

Code:

<html>
<head>
<STYLE TYPE="text/css">
#dek {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
</STYLE>
<DIV ID="dek"></DIV>
<script src="ajaxjs.js"></script>
</head>
<body>

<%
for (int i =0; i < 10; i++)
{
%>
  <script type="text/javascript" > var s = "WFS1"; </script>
  <a href="#" ONMOUSEOVER="popup(s,'yellow')" ONMOUSEOUT="kill()">Hover Me!</a>
  <br>
  <a href="#" ONMOUSEOVER="popup('Link description here','yellow')" ONMOUSEOUT="kill()">Hover Me!</a>
  <br>
  <a href= "#" ONMOUSEOVER= "javascript:loadContent(s)" ONMOUSEOUT="kill()">Load Ajax content</a>
  <div id="prtCnt"></div>
<%
}
%>
</body>
</html>

load.jsp

Code:

<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>
<%@ page language="java" import="java.sql.*"%>
<%@ page import="java.util.*" %>
<%
 String q =request.getParameter("q");
 Class.forName("com.mysql.jdbc.Driver");
            String connectionUrl = "jdbc:mysql://192.168.7.4/variant_db?" +"user=manish&password=";
            Connection con = DriverManager.getConnection(connectionUrl);
            Statement stmt = con.createStatement ();
            String query = "select * from gene where entrez_symbol = '"+ q + "';"; 
            ResultSet rs = stmt.executeQuery(query);
            int numCols = rs.getMetaData().getColumnCount();
            while(rs.next())
            {
                for (int i =1; i < numCols; i++)
                    out.println(rs.getString(i)); 
            }
            rs.close();
            stmt.close();
            con.close();
%>

Attached is screen shot of output. Text printed in orange is unwanted one(marked black). How to remove that content?

Regards

Attached Files

Screenshot.jpg (42.7 KB, 159 views)