jQuery ajax ne semble pas être la lecture des données HTML dans Chrome

StackOverflow https://stackoverflow.com/questions/2550570

Question

J'ai un fichier HTML (App) qui lit un autre HTML (données) fichier via jQuery.ajax(). Il trouve alors des balises spécifiques dans le fichier HTML de données et utilise le texte dans les balises pour afficher tri des infobulles.

Voici le fichier HTML App: 

<!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>

Et voici le code HTML de données 

<!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>

Cela fonctionne comme prévu dans Firefox, mais pas dans Chrome (chrome 5.0.356.0).

La console.log (data) affiche une chaîne vide dans la console JavaScript de Chrome. Firebug dans Firefox, cependant, affiche l'ensemble HTML de données.

Est-ce que je manque quelque chose? Tous les pointeurs?

Était-ce utile?

La solution

Je ne sais pas la réponse, mais quelques pistes d'investigation que je pouvais penser:

  1. est un objet de données (plutôt qu'une chaîne?) Peut-être que la console Chrome ne sait pas comment l'afficher. Vous pouvez essayer une méthode de sortie alternative à tester, ou si la fourniture du réglage « dataType » fait une différence.
  2. Est-ce que le rappel de succès appelé tout en chrome? Il pourrait être un bug ou une fonction de sécurité du navigateur (comme protection cross-site scripting, ou ayant désactivé javascript) qui est le bloquer.
  3. Expérience avec une version statique du HTML / CSS votre code est censé produire, et assurez-vous qu'il affiche correctement dans les deux navigateurs.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top