mouseover only works once 1

[VBAHole22]

I am trying to create a mouseover script that calls back an xmlrequest to get data off of my server without a post back. I modeled my code after this

http://www.anders.com/projects/blogQuote/

and added my own C# web service back end

I'm having a problem with it in IE though. It works when the user first mouses over the link, but subsequent mouseovers do nothing. In Firefox it works fine each time.

Any ideas what might be a fix?

 

[tsdragon]

I doubt the mouseover event itself is the problem. There must be something that you are doing in the event handler that FF and IE interpret or handle differently. If you post the code people here will probably be able to figure it out.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[VBAHole22]

Maybe it's something simple that I am missing. Maybe I need to add a mouseout event?


Here are the relevant snippets:

in body:

<a href="

http://www.buffalowildwings.com"

class="quote" onMouseover="showQuote( 'BW3' )"><u>BW3</u><span id="BW3"></span></a>


in js file:

var req;
var quoteArray = new Array( );

function loadXMLDoc( url ) {
if ( window.XMLHttpRequest ) { // branch for native XMLHttpRequest object
req = new XMLHttpRequest( );
req.onreadystatechange = processReqChange;
req.open( "GET", url, true );
req.send( null );

}
else if ( window.ActiveXObject ) { // branch for IE/Windows ActiveX version
req = new ActiveXObject( "Microsoft.XMLHTTP" );
if ( req ) {
req.onreadystatechange = processReqChange;
req.open( "GET", url, true );
req.send( );

}

}

}

function processReqChange( ) {
if ( req.readyState == 4 ) {
if ( req.status == 200 ) {
response = req.responseXML.documentElement;
symbol = response.getElementsByTagName( 'symbol' )[0].firstChild.data;
companyName = response.getElementsByTagName( 'companyName' )[0].firstChild.data;
lastTrade = response.getElementsByTagName( 'lastTrade' )[0].firstChild.data;
lastTradeTime = response.getElementsByTagName( 'lastTradeTime' )[0].firstChild.data;
change = response.getElementsByTagName( 'change' )[0].firstChild.data;

quoteArray[ symbol ] = new Date( ).getTime( );

var color = "#000000";
if ( change.substring( 0, 1 ) == '-' ) {
color = "#FF0000";

}
else if ( change.substring( 0, 1 ) == '+' ) {
color = "#00AA00";

}
html = "<center><table border='0' cellspacing='0' cellpadding='2' width='130'><tr><td colspan='2' align='center' style='font-family:Arial;font-size:12px;'>"
+ companyName + "</td></tr><tr><td style='font-family:Arial;font-size:14px;'><b>lon=" + lastTrade + "</b></td><td><img src='

http://66.255.113.153/sujo/images/beer.gif"

+ "' width='60' height='16' border='0'></a></td></tr><tr><td colspan='2' style='font-family:Arial;font-size:10px;'>Rating: <font color='"
+ color + "'>" + change + "</font><br> " + lastTradeTime + "</td></tr></table></center>";

eval( "document.getElementById( '" + symbol + "' ).innerHTML = html" );

}
else {
// alert( "There was a problem retrieving the XML data:\n" + req.statusText );

}

}

}

function showQuote( symbol ) {
if ( quoteArray[ symbol ] == null || quoteArray[ symbol ] < new Date( ).getTime( ) - 100000 ) {
eval( "document.getElementById( '" + symbol + "' ).innerHTML = '<center>Loading...</center>'" );
url = '

http://myserver/service1.asmx/Anders1?symbol='

+ symbol;
//alert('url is ' + url);
loadXMLDoc( url );

}

}


My C# backend web service

public XmlDocument Anders1WM(string symbol)
{
ArrayList lats = new ArrayList();
ArrayList lons = new ArrayList();
ArrayList labels = new ArrayList();
ArrayList ratings = new ArrayList();
int c = 0;


SqlConnection connection = null;

connection = Utility.GetConnection();
if (connection == null)
{
Utility.ErrorToXML("Bad SQL Connection Parameters");
}
try
{
SqlCommand command = new SqlCommand("", connection);
command.CommandText = "SELECT TOP 1 lat, lon, bar_label_ext, bar_rating FROM Bars Where bar_location = 'mond' ORDER by bar_label";
SqlDataReader reader = command.ExecuteReader();
while( reader.Read() )
{
lats.Add(Convert.ToDouble(reader.GetValue(0)));
lons.Add(Convert.ToDouble(reader.GetValue(1)));
labels.Add(reader.GetValue(2).ToString());
ratings.Add(reader.GetValue(3).ToString());
c+=1;
}
reader.Close();
command.Cancel();
connection.Close();
}
catch(Exception ex)
{
System.Diagnostics.Debug.WriteLine("Exception in Event.Analyze(): " + ex);
return null;
}



XmlTextWriter xmlWriter = new XmlTextWriter(new MemoryStream(), Encoding.UTF8);
try
{
xmlWriter.Formatting = Formatting.Indented;
xmlWriter.WriteStartDocument(true);
xmlWriter.WriteStartElement("markers");


for (int g = 0; g < lats.Count; g++)
{
xmlWriter.WriteStartElement("marker");
xmlWriter.WriteElementString("symbol","BW3");
xmlWriter.WriteElementString("companyName",lats[g].ToString());
xmlWriter.WriteElementString("lastTrade",lons[g].ToString());
xmlWriter.WriteElementString("lastTradeTime",labels[g].ToString());
xmlWriter.WriteElementString("change",ratings[g].ToString());
xmlWriter.WriteEndElement();
}

xmlWriter.WriteEndElement();
xmlWriter.WriteEndDocument();


// <markers>
// <marker lat="37.5330" lng="-77.4424" />
// <marker lat="37.5335" lng="-77.4224" />
// <marker lat="37.5345" lng="-77.4334" />
// <marker lat="37.5340" lng="-77.4324" />
//</markers>

xmlWriter.Flush();
Stream xmlStream = xmlWriter.BaseStream;
xmlStream.Position = 0;
xmlWriter = null;
xmlStream.Position=0;
XmlDocument xml = new XmlDocument();
xml.Load(xmlStream);

return xml;
}
catch (Exception ex)
{
return Utility.ErrorToXML(ex.Message);
}


}

 

[Lrnmore]

I can tell you one thing that I've run across with the
combination of IE and XMLHttpRequest is a cache issue.

Nothing may be wrong with your code, IE may be stubbornly denying the new request.

Check out this FAQ and especially the "wiki" link at the end.
AJAX

I don't see where you are setting any request headers either.

We will likely give you better aid if you can put this at a temporary url.

Thanks,
--Mark

 

[VBAHole22]

Humm... don't know anything bout no request headers. What's that all bout?

 

[Lrnmore]

This will make it work in both FF and IE:

Add these classes to your style sheet:

.hide_quote {
  display: none;
}

.show_quote {
  display: block;
  position: absolute;
  top: 18px;
  left: 10px;
  width: 125px;
  height: 70px;
  border: 1px solid #000;
  background-color: #ffe;
  color: #000;
  font-family: Arial, "Arial MT", "MS Sans Serif", sans-serif;
  font-size: 10px;
  z-index: 1;

}

Like you said a mouseout is needed, you can add this:

function showQuote( symbol, toggle ) {
         var spanObj = document.getElementById(symbol);
         ( toggle == 'show')? spanObj.className = 'show_quote' : spanObj.className = 'hide_quote';
    if ( quoteArray[ symbol ] == null || quoteArray[ symbol ] < new Date( ).getTime( ) - 100000 ) {
        eval( "document.getElementById( '" + symbol + "' ).innerHTML = '<center>Loading...</center>'" );
        url = '[URL unfurl="true"]http://www.anders.com/projects/blogQuote/getQuote.jsp?symbol='[/URL] + symbol;
        loadXMLDoc( url );
    }
}

With this in the page:

<a href="[URL unfurl="true"]http://finance.yahoo.com/q/bc?s=BRK-A"[/URL] class="quote" 
     onMouseover="showQuote( 'BRK-A', 'show' )" onMouseout="showQuote( 'BRK-A', 'hide')">
     <u>Berkshire Hathaway</u><span id="BRK-A" class="hide_quote"></span></a>

AFA setting headers see:
Google

Thanks,
--Mark

 

[VBAHole22]

Thank you very much Mark. That did the trick very nicely

 

[Lrnmore]

Glad to Help.