I have an HTML (App) file that reads another HTML (data) file via jQuery.ajax(). It then finds specific tags in the data HTML file and uses text within the tags to display sort-of tool tips.
Here's the App HTML file:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<style type="text/css">
<!--/* <![CDATA[ */
body {
font-family : sans-serif;
font-size : medium;
margin-bottom : 5em;
}
a, a:hover, a:visited {
text-decoration : none;
color : #2222aa;
}
a:hover {
background-color : #eeeeee;
}
#stat_preview {
position : absolute;
background : #ccc;
border : thin solid #aaa;
padding : 3px;
font-family : monospace;
height : 2.5em;
}
/* ]]> */-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#stat_preview").hide();
$(".cfg_lnk").mouseover(function () {
lnk = $(this);
$.ajax({
url: lnk.attr("href"),
success: function (data) {
console.log (data);
$("#stat_preview").html("A heading<br>")
.append($(".tool_tip_text", $(data)).slice(0,3).text())
.css('left', (lnk.offset().left + lnk.width() + 30))
.css('top', (lnk.offset().top + (lnk.height()/2)))
.show();
}
});
}).mouseout (function () {
$("#stat_preview").hide();
});
});
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<ul>
<li><a class="cfg_lnk" href="data.html">Sample data</a></li>
</ul>
<div id="stat_preview"></div>
</body>
</html>
And here is the data HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<table>
<tr>
<td class="tool_tip_text"> Some random value 1</td>
<td class="tool_tip_text"> Some random value 2</td>
<td class="tool_tip_text"> Some random value 3</td>
<td class="tool_tip_text"> Some random value 4</td>
<td class="tool_tip_text"> Some random value 5</td>
</tr>
<tr>
<td class="tool_top_text"> Some random value 11</td>
<td class="tool_top_text"> Some random value 21</td>
<td class="tool_top_text"> Some random value 31</td>
<td class="tool_top_text"> Some random value 41</td>
<td class="tool_top_text"> Some random value 51</td>
</tr>
</table>
</body>
</html>
This is working as intended in Firefox, but not in Chrome (Chromium 5.0.356.0).
The console.log (data) displays empty string in Chromium's JavaScript console. Firebug in Firefox, however, displays the entire data HTML.
Am I missing something? Any pointers?