Domanda

Ho un file HTML (App) che legge un altro HTML (dati) file tramite jQuery.ajax(). E poi trova i tag specifici nel file di dati HTML e utilizza il testo all'interno dei tag per visualizzare sorta-di comandi.

Ecco il file 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>

E qui è il codice HTML dei dati

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

Questo è il lavoro come previsto in Firefox, ma non in Chrome (Chromium 5.0.356.0).

Il display console.log (data) vuota stringa nella console JavaScript di Chromium. Firebug in Firefox, tuttavia, visualizza l'intero codice HTML dei dati.

Mi sto perdendo qualcosa? Eventuali puntatori?

È stato utile?

Soluzione

Non sono sicuro della risposta, ma un paio di vie di ricerca che mi veniva in mente:

  1. è un oggetto di dati (piuttosto che una stringa?) Forse la console Chromium non sa come per visualizzarlo. Si potrebbe provare un metodo di output alternativo per testarlo, o vedere se la fornitura di impostazione 'dataType' fa alcuna differenza.
  2. È il callback successo chiamato a tutti in cromo? Potrebbe essere un bug, o qualche funzione di sicurezza del browser (come la protezione cross-site scripting-, o avere javascript disabilitato) che è bloccandola.
  3. Esperimento con una versione statica del codice HTML / CSS si suppone che il codice per la produzione, e assicurarsi che viene visualizzato correttamente in entrambi i browser.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top