Esempio semplice di jQuery ajax che non trova elementi in HTML restituito

Sto cercando di imparare le funzioni ajax di jQuery. Ho funzionato, ma jQuery non trova elementi nel DOM HTML restituito. Nella stessa cartella di jQuery, eseguire questa pagina:Esempio semplice di jQuery ajax che non trova elementi in HTML restituito

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>runthis</title> 

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script> 

    <script tyle="text/javascript"> 
    $(document).ready(function(){ 
     $('input').click(function(){ 
      $.ajax({ 
       type : "GET", 
       url : 'ajaxtest-load.html', 
       dataType : "html", 
       success: function(data) { 

       alert(data); // shows whole dom 

       alert($(data).find('#wrapper').html()); // returns null 

       }, 
       error : function() { 
        alert("Sorry, The requested property could not be found."); 
       } 
      }); 
     }); 
    }); 
    </script 

</head> 
<body> 
    <input type="button" value="load" /> 
</body> 
</html>

che carica la pagina "ajaxtest-load.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>load this</title> 

</head> 
<body> 
    <div id="wrapper"> 
    test 
    </div> 
</body> 
</html>

Dà due avvisi. Uno che mostrava il DOM era stato caricato, ma il secondo mostra NULL invece del # wrapper. Che cosa sto facendo di sbagliato?

EDIT: Sto caricando "ajaxtest-load.html" che include l'intera intestazione, incluso jquery di nuovo. È questo il problema?

fonte

2009-06-23 user110218

Forse ripulire il codice principale e pubblicare l'aspetto del codice HTML su 'ajaxtest-load.html' – ScottE

Il secondo blocco html è ajaxtest-load.html. Modificato la descrizione. Mi dispiace per quello – user110218

Sono riuscito a caricare gli snippet di documenti html completi bene usando .load().

Per creare un nuovo blocco con html estratti nella DOM faccio questo:

$('<div></div>').appendTo('body').load('some-other-document.html div#contents');

Se non funziona per voi, assicurarsi che si sta utilizzando la versione più recente (o postare 1.2) di jQuery . Vedi lo documentation for .load per altri esempi.

Edit:

nota, però, che con l'esempio precedente il risultato sarà:

<div><div id="contents">...</div></div>

per ottenere solo i contenuti delle #contents div in altro documento, utilizzare un callback- funzione nella chiamata funzione di caricamento.

$('<div></div>').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) { 
     if (textStatus == success) { 
      $('<div></div>').appendTo('body').html($(this).html()); 
     } 
    } 
);

fonte

2009-06-23 17:14:40

Mi piace perché evita di incollare immediatamente i dati restituiti nel documento. Per tua informazione, se non ti dispiace creare un div fittizio e inserire i dati restituiti, puoi farlo all'interno di '$ .get()'. Questo è essenzialmente ciò che '.load()' fa sotto il cofano. –

grazie, è la soluzione perfetta di cui avevo bisogno per il mio progetto. Nelle mie chiamate ajax ricevo i dati richiesti dall'utente (una descrizione, il contenuto della pagina o qualcos'altro) e dovevo essere sempre accompagnato da un oggetto JSON per aggiornare i widget dell'utente ... Dividere le informazioni richieste e il json oggetto è stato eseguito inviando 2 div e la tua tecnica mi permette di fare .find() per restituire i dati necessari. Grazie ancora – Salketer

Perché non provare questo e vedere cosa succede:

$('#testDiv').load('ajaxtest-load.html #wrapper', function(resp) { 
    alert(resp); 
});

Dal $.load documentation:

In jQuery 1.2 è ora possibile specificare un selettore jQuery nell'URL. Così facendo filtra il documento HTML in arrivo, iniettando solo gli elementi corrispondenti al selettore.

fonte

2009-06-23 16:00:37 karim79

Grazie, ma eseguendo quello, firebug ha mostrato l'errore "$ .load" non è una funzione. – user110218

Non puoi usare solo $ .load. Devi usarlo su un selettore come $ (selector) .load() –

@T B - sì, non so cosa stavo pensando. @threebttn Scusami, prova a usarlo per riempire un div. Vedi la mia modifica. – karim79

ho scoperto che se ajaxtest-load.html non ha < html> o < body> ma pochi elementi HTML, fa lavoro.

Edit:

Se l'ingresso deve essere una pagina HTML completo, forse si può prima striscia dei tag non si vuole con le operazioni di stringa .. qualcuno?

Edit 2:

ricordava vagamente Javascript/DOM consentito di "documenti temporanei", che si può operare su e utilizzare i risultati di, poi un po 'di googling ha prodotto una funzione parseHTML (http://www.daniweb.com/forums/post874892-2.html), che ho adattato per restituire il bit corretto:

$(document).ready(function(){ 
    $('input').click(function(){ 
    $.ajax({ 
     type : "POST", 
     url : 'ajaxtest-load.html', 
     dataType : "html", 
     success: function(data) { 
     alert(data); // shows whole dom 
     var gotcha = parseHTML(data, 'wrapper'); 
     if (gotcha) { 
      alert($(gotcha).html()); 
     }else{ 
      alert('ID not found.'); 
     } 
     }, 
     error : function() { 
     alert("Sorry, The requested property could not be found."); 
     } 
    }); 
    }); 
}); 

function parseHTML(html, idStr) { 
    var root = document.createElement("div"); 
    root.innerHTML = html; 
    // Get all child nodes of root div 
    var allChilds = root.childNodes; 
    for (var i = 0; i < allChilds.length; i++) { 
    if (allChilds[i].id && allChilds[i].id == idStr) { 
     return allChilds[i]; 
    } 
    } 
    return false; 
}

Funziona?

fonte

2009-06-23 16:37:26 MSpreij

Oh, forse un regex a spogliare il corpo o qualcosa del genere? E poi usa jQuery per convertirlo in un oggetto su cui riesco .find()? – user110218

Qualcosa del genere, sì. Avrei fornito un esempio ma la mia regex JS non è fantastica, e sono doppiamente cauto nel dare esempi di regex quando ho pochissima idea di cosa potrebbe essere nel contenuto :-) (Come, il corpo potrebbe avere attributi contenenti un '>') Ma disposti a provare .. – MSpreij

Questa non è una risposta diretta, ma può aiutare a chiarire le cose.

Il parametro dati della funzione di callback può essere trasformato in un jQuery (1.6.2) dell'oggetto $ (dati), che contiene le varie parti della risposta HTML:

Roba che precede il documento effettivo , ad esempio una dichiarazione doctype o un textnode dello spazio bianco ignorabile.
Il contenuto dell'elemento testa.
Il contenuto dell'elemento del corpo.

Gli elementi html, testa e corpo non sono nell'oggetto dati. Poiché il numero di elementi contenuti nella testa e nel corpo può variare, non dovresti ottenerli indicizzando come $ (dati) [2]. Invece, applicare un filtro a questo oggetto, in questo modo:

 $.get(
      uri, 
      function(data, textStatus, jqXHR){ 
      var $doc = $(data); 
      var title = $doc.filter('title').text(); 
      // title is the title from the head element. 
      // Do whatever you need to do here. 
      } 
     );

Dopo aver filtrato gli elementi giusti, è possibile applicare ulteriori selettori usando find().

Sfortunatamente, in IE gli elementi di testa non fanno parte di $ (dati). Non ho idea del perché questo sia.

fonte

2012-03-07 10:15:03 rakensi

+1 perché funziona anche con l'ultima implementazione '.ajax()'. Ho appena cambiato '.find()' in '.filter()' e tutto ha funzionato! –

Ho passato ore a cercare di capire perché non avrebbe trovato un elemento specifico, ma ha trovato tutti gli elementi all'interno. Il passaggio da '.find()' a '.filter()' ha funzionato. Grazie mille! Inoltre, voglio dare un pugno in faccia a un bambino. Nemmeno scherzando, è così che sono pazzo. – qwerty

Esempio semplice di jQuery ajax che non trova elementi in HTML restituito

risposta

Problemi correlati