Frage

Ich habe eine HTML (App) Datei, die eine andere HTML (Daten) Datei über jQuery.ajax() liest. Es findet dann bestimmte Tags in der Daten HTML-Datei und verwendet, um Text innerhalb der Tags sorten von Tooltips angezeigt werden soll.

Hier ist die App HTML-Datei:

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

Und hier sind die Daten, 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>

Das ist wie beabsichtigt in Firefox, aber nicht in Chrome (Chrom 5.0.356.0).

Die console.log (data) zeigt leere Zeichenkette in Chromium der JavaScript-Konsole. Firebug in Firefox, jedoch zeigt die gesamten Daten HTML.

Bin ich etwas fehlt? Alle Zeiger?

War es hilfreich?

Lösung

Nicht sicher, ob der Antwort, aber ein paar Möglichkeiten der Untersuchung, dass ich mich vorstellen könnte:

  1. Ist-Daten ein Objekt (und nicht als String?) Vielleicht ist die Chrom-Konsole nicht weiß, wie es angezeigt werden soll. Sie könnten ein alternativen Ausgabeverfahren versuchen, es zu testen, oder ob Versorgung der ‚datatype‘ Einstellung einen Unterschied macht.
  2. Ist der Erfolg Rückruf überhaupt in Chromium aufgerufen wird? Es könnte ein Fehler oder ein Browser Sicherheitsmerkmal (wie Cross-Site-Scripting-Schutz, oder mit Javascript deaktiviert) sein, dass es blockiert.
  3. Experiment mit einer statischen Version des HTML / CSS Code zu produzieren soll, und stellen Sie sicher, dass es korrekt angezeigt in beiden Browsern.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top