jQuery .find () non restituisce dati in IE ma fa in Firefox e Chrome

Ho aiutato un amico a fare un po ‘di lavoro sul web per lui. Parte di ciò di cui aveva bisogno era un modo semplice per cambiare un paio di parti di testo sul suo sito. Invece di fargli modificare l’HTML, ho deciso di fornire un file XML con i messaggi e ho usato jQuery per estrarli dal file e inserirli nella pagina.

Funziona alla grande … In Firefox e Chrome, non così eccezionale in IE7. Speravo che qualcuno di voi potesse dirmi perché. Ho fatto una buona ma di googlare ma non ho potuto trovare quello che sto cercando.

Ecco l’XML:

   This message is put up in the header area.   This message is put in the lower left cell.   

Ed ecco la mia chiamata jQuery:

  $(document).ready(function() { $.get('messages.xml', function(d) { //I have confirmed that it gets to here in IE //and it has the xml loaded. //alert(d); gives me a message box with the xml text in it //alert($(d).find('message')); gives me "[object Object]" //alert($(d).find('message')[0]); gives me "undefined" //alert($(d).find('message').Length); gives me "undefined" $(d).find('message').each(function() { //But it never gets to here in IE var $msg = $(this); var type = $msg.attr("type"); var message = $msg.text(); switch (type) { case "HeaderMessage": $("#HeaderMessageDiv").html(message); break; case "FooterMessage": $("#footermessagecell").html(message); break; default: } }); }); });  

C’è qualcosa che devo fare in modo diverso in IE? Sulla base della finestra di messaggio con [object Object], si presume che .find lavorasse in IE ma poiché non posso indicizzare nell’array con [0] o controllare che sia Length, suppongo che ciò significhi. restituire qualsiasi risultato. Qualche ragione per cui ciò funzionerebbe perfettamente in Firefox e Chrome ma fallirebbe in IE?

Sono un newbie totale con jQuery quindi spero di non aver fatto qualcosa di stupido. Quel codice sopra è stato cancellato da un forum e modificato per soddisfare le mie esigenze. Dal momento che jQuery è multipiattaforma ho pensato che non avrei dovuto affrontare questo casino.

Modifica: ho scoperto che se carico la pagina in Visual Studio 2008 ed eseguo, funzionerà in IE. Quindi risulta funzionare sempre quando viene eseguito attraverso il web server di sviluppo. Ora sto pensando che a IE non piace fare .find in XML caricato fuori dalla mia unità locale, quindi forse quando questo è su un vero web server funzionerà OK.

Ho confermato che funziona bene quando sfogliato da un server web. Deve essere una peculiarità con IE. Sto indovinando è perché il server web imposta il tipo mime per il trasferimento di file di dati xml e senza che IE non analizza correttamente l’xml.

Controlla il tipo di contenuto della risposta. Se si ottiene messages.xml come tipo mime errato, Internet Explorer non lo analizzerà come XML.

Per verificare il tipo di contenuto, è necessario accedere all’object XMLHttpRequest. Il normale callback di successo non lo passa come parametro, quindi è necessario aggiungere un gestore di eventi generico ajaxComplete o ajaxSuccess. Il secondo parametro per questi eventi è l’object XMLHttpRequest. È ansible chiamare il metodo getResponseHeader su di esso per ottenere il tipo di contenuto.

 $(document).ajaxComplete(function(e, x) { alert(x.getResponseHeader("Content-Type")); }); 

Sfortunatamente non c’è modo che io sappia in Internet Explorer di ignorare ciò che il server invia, quindi se è sbagliato è necessario cambiare il server per inviare “text / xml” per il tipo di contenuto.

Alcuni browser hanno un metodo overrideMimeType che puoi chiamare prima di send per forzare l’utilizzo di “text / xml”, ma Internet Explorer non lo supporta per quanto ne so.

Dal momento che il problema di IE è il suo parser xml soffoca su file xml che non vengono passati usando l’intestazione “text / xml” corretta, puoi includere un po ‘di codice nell’evento completo Ajax :

     complete: function (xhr, status)
     {
       alert ("COMPLETATO. Hai: \ n \ n" + xhr.responseText);
       if (status == 'parsererror')
       {
         alert ("C'era un PARSERERRORE. Fortunatamente, sappiamo come risolvere il problema. \ n \ n" +
                "Il testo completo della risposta del server era" + xhr.responseText);

         xmlDoc = null;

         // Crea il documento xml dalla stringa responseText.
         // Questo usa il metodo w3schools .
         // vedi anche
         if (window.DOMParser)
         {
           parser = new DOMParser ();
           xmlDoc = parser.parseFromString (xhr.responseText, "text / xml");
         }
         altro // Internet Explorer
         {
           xmlDoc = new ActiveXObject ("Microsoft.XMLDOM");
           xmlDoc.async = "false";
           xmlDoc.loadXML (xhr.responseText);
         }

         $ ('#response') .append ('

complete event / xmlDoc:' + xmlDoc + ''); $ ('#response') .append ('

evento / stato completo:' + stato + ''); processXMLDoc (xmlDoc); } },

ecco un esempio più completo

 
 
 
  Lettura di XML con jQuery </ title>
 <style>
 #risposta
 {
   bordo: solido 1px nero;
   imbottitura: 5px;
 }
 </ Style>
 <script src = "jquery-1.3.2.min.js"> </ script>
 </script><script>
 function processXMLDoc (xmlDoc)
 {
   var heading = $ (xmlDoc) .find ('heading'). text ();
   $ ('#response') .append ('<h1>' + heading + '</ h1>');

   var bodyText = $ (xmlDoc) .find ('body'). text ();
   $ ('#response') .append ('<p>' + bodyText + '</ p>');
 }
 $ (Document) .ready (function ()
 {
   jQuery.ajax ({

     digitare: "OTTIENI",

     url: "a.xml", //!  stai attento allo stesso
     // problemi del tipo di origine

     dataType: "xml", // 'xml' lo passa attraverso il parser xml del browser

     success: function (xmlDoc, status)
     {
       // L'EVENTO DI SUCCESSO significa che il documento xml
       // è venuto giù dal server E è stato analizzato correttamente
       // usando i cappucci di parsing xml del browser.

       processXMLDoc (xmlDoc);

       // IE si arrabbia molto quando
       // il tipo mime del documento che
       // viene passato non è text / xml.

       // Se manca l'intestazione text / xml
       // apparentemente l'analisi xml fallisce,
       // e in IE non si esegue assolutamente questa funzione.

     },
     complete: function (xhr, status)
     {
       alert ("COMPLETATO. Hai: \ n \ n" + xhr.responseText);
       if (status == 'parsererror')
       {
         alert ("C'era un PARSERERRORE. Fortunatamente, sappiamo come risolvere il problema. \ n \ n" +
                "Il testo completo della risposta del server era" + xhr.responseText);

         xmlDoc = null;

         // Crea il documento xml dalla stringa responseText.
         // Questo usa il metodo w3schools .
         // vedi anche
         if (window.DOMParser)
         {
           parser = new DOMParser ();
           xmlDoc = parser.parseFromString (xhr.responseText, "text / xml");
         }
         altro // Internet Explorer
         {
           xmlDoc = new ActiveXObject ("Microsoft.XMLDOM");
           xmlDoc.async = "false";
           xmlDoc.loadXML (xhr.responseText);
         }

         $ ('#response') .append ('</p><p> complete event / xmlDoc:' + xmlDoc + '</ p>');
         $ ('#response') .append ('</p><p> evento / stato completo:' + stato + '</ p>');

         processXMLDoc (xmlDoc);
       }
     },
     errore: funzione (xhr, stato, errore)
     {
       avviso ('ERRORE:' + stato);
       alert (xhr.responseText);
     }
   });
 });
 </ Script>
 </ Head>
 <body>
   <div>
     <h1> <a href="http://think2loud.com/reading-xml-with-jquery/"> Lettura di XML con jQuery </a> </ h1>
     <p>
       <a href="http://docs.jquery.com/Ajax/jQuery.ajax#options"> # 1 ref jQuery.ajax </a>
     </ P>

   </ Div>

   </p><p> Il server dice: </ p>
   <pre id = "risposta">

   </ Pre>
 </ Body>
 </ Html>

</pre>
<h2>  contenuto di a.xml </h2>
<pre>
 <? xml version = "1.0"?>
 <note>
   <a> Tove </ a>
   <da> Jani </ da>
   <titolo> Promemoria </ heading>
   <body> Non dimenticarmi di me questo fine settimana! </ body>
 </ Note>
</body></titolo></da></a></note></pre>
</p>
<p>  Estende questo esempio . </p>
</h1>
</div>
<p></body></p>
</h1>
<p></script></style>
<p>

Il dataType: “xml” non risolve questo problema in IE8, piuttosto attraverso un’espettazione “TypeError”.

Correzione rapida e sporca, consiste nel racchiudere la risposta xml in un elemento html, ad esempio div:

 $("
" + xml + "
").find("something");

(funziona su tutti i browser)

Potresti scoprire che se si passa il tipo di dati alla chiamata get, può essere analizzato correttamente come XML. I quirk di IE potrebbero impedire a jQuery di rilevarlo automaticamente come XML, causando il passaggio del tipo di dati errato alla funzione di callback.

  

MODIFICARE:

In realtà ho appena sperimentato .find () che non funziona per un progetto in nessun browser, ma sono stato in grado di usare .filter (). È fastidioso dover ricorrere a questo, ma se funziona …

 $(d).filter('message').each(......); 

Ho anche avuto lo stesso problema, ma ho risolto il problema di IE jQuery XML .find () utilizzando il codice seguente.

Nota: utilizzare .text () invece di .html ().

 jQuery.ajax({ type: "GET", url: "textxml.php", success: function(msg){ data = parseXml(msg); //alert(data); var final_price = jQuery(data).find("price1").text(); alert(final_price); } }); function parseXml(xml) { if (jQuery.browser.msie) { var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(xml); xml = xmlDoc; } return xml; } 

Tu puoi fare

    This message is put up in the header area.   This message is put in the lower left cell.    

e usa find (). Funziona per IE8 e per Firefox v.3.6.3

A volte IE legge interruzioni di riga come nodes aggiuntivi. Prova a rimuovere lo spazio bianco extra fino ai tag o prova a racchiuderlo come CDATA.

Ho incontrato lo stesso problema quando stavo recuperando i dati da un documento XML. Dopo aver fatto ricerche su Internet, sono venuto a cercare questo sito ma senza una risposta adeguata al problema. Ma una risposta mi ha aiutato a risolvere il problema però:

“Dal momento che il problema di IE è il suo parser xml soffoca su file xml che non vengono passati usando l’intestazione” text / xml “corretta, puoi includere un po ‘di codice nell’evento completo Ajax:”

Ho identificato due problemi con IE quando faccio le chiamate $ .ajax (…) e $ .get (…):

  1. Il valore del parametro xml deve essere in maiuscolo (‘XML’ non ‘xml’) per entrambe le chiamate: $ .ajax (…, dataType: “XML”) e $ .get (xmlDataFilePath, function (d) {.. .}, “xml”)

  2. Quando la chiamata ajax ha esito positivo, l’argomento xml della funzione callback è in realtà una stringa e non un object DOM XML

Il secondo problema è risolto in questo modo:

 $(document).ready(function() { $.ajax( { type: "GET", url: "messages.xml", dataType: "XML", /* this parameter MUST BE UPPER CASE for it to work in IE */ success: function(xml) { processXmlDoc( createXmlDOMObject ( xml ) ); }, /* success: */ error: function(xhr, textStatus, errorThrown) { alert(textStatus + ' ' + errorThrown); } /* error: */ });/* $.ajax */ function createXmlDOMObject(xmlString) { var xmlDoc = null; if( ! window.DOMParser ) { // the xml string cannot be directly manipulated by browsers // such as Internet Explorer because they rely on an external // DOM parsing framework... // create and load an XML document object through the DOM // ActiveXObject that it can deal with xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" ); xmlDoc.async = false; xmlDoc.loadXML( xmlString ); } else { // the current browser is capable of creating its own DOM parser parser = new DOMParser(); xmlDoc = parser.parseFromString( xmlString, "text/xml" ) ; } return xmlDoc; } function processXmlDoc(xmlDoc) { // write here your XML processing logic for the document object... } }); // $(document).ready 
 $.ajax({ url: 'messages.xml', success: function(data){ $(d).find('message').each(function(){ //But it never gets to here in IE var $msg = $(this); var type = $msg.attr("type"); var message = $msg.text(); switch (type) { case "HeaderMessage": $("#HeaderMessageDiv").html(message); break; case "FooterMessage": $("#footermessagecell").html(message); break; } }); }, dataType: 'xml' }); 

Prova a dire a jQuery che dataType sta ottenendo in modo che utilizzi i metodi corretti per elaborare la tua richiesta.

Cambia il seguente contenuto.

 dataType :"text/xml", 

a

 dataType :"xml", 

Non c’è bisogno di cambiare il find ().

Ho anche avuto lo stesso problema durante l’importazione di contatti e-mail. Sono stato in grado di importare i contatti e visualizzarli in tutti i browser ad eccezione di IE, poiché .find() non funzionava.

Così, ho assegnato "text/xml" a response.contentType .

ie response.contentType = "text/xml" e ha funzionato.

prima era "text/html"

Ho avuto lo stesso problema, sto sviluppando un’applicazione che è basata sul web, ma ho bisogno di distribuirla offline, all’interno di un CD. Ho trovato la soluzione in questa pagina che è la stessa soluzione che puoi vedere sopra http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests e il codice è molto semplice:

  $.ajax({ url: "data.xml", dataType: ($.browser.msie) ? "text" : "xml", success: function(data){ var xml; if (typeof data == "string") { xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); } else { xml = data; } // write here your XML processing logic for the document object... } }); 

Ho lo stesso problema…

Risolto con questo:

http://www.w3schools.com/dom/dom_parser.asp

 if (window.DOMParser) { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } else // Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } 

usalo per trasformare il tuo var in object xml …

Sta funzionando bene !!! Prova questo,

Chrome / Firefox:

 xml.children[0].childNodes[1].innerHTML; 

IE8 + / Safari:

 xml.childNodes[0].childNodes[1].textContent; 

IE8:

 xml.documentElement.childNodes[1].text; 

Esempio di codice qui,

 var xml = $.parseXML(XMLDOC); Var xmlNodeValue = ""; if(userAgent.match("msie 8.0")){ xmlNodeValue = xml.children[0].childNodes[1].innerHTML; }else{ // IE8+ xmlNodeValue = xml.childNodes[0].childNodes[1].textContent; } 

Se l’XML è generato da uno script PHP, puoi farlo

 '; ?> 

Quindi il metodo di ricerca funziona su ogni browser