jQuery ajax doesn't seem to be reading HTML data in Chromium
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?
Not sure of the answer, but a few avenues of investigation that I could think of:
- Is data an object (rather than a string?) Maybe the Chromium console doesn't know how to display it. You could try an alternative output method to test it, or see if supplying the 'dataType' setting makes any difference.
- Is the success callback being called at all in Chromium? It could be a bug, or some browser security feature (like cross-site-scripting protection, or having javascript disabled) that's blocking it.
- Experiment with a static version of the HTML/CSS your code is supposed to produce, and make sure it displays properly in both browsers.
加载中,请稍侯......
精彩评论