Holen Sie sich DOM-element von AJAX-response mit JavaScript

Habe ich ein AJAX-request, der gibt ein Stück HTML als Antwort, dass ist eingefügt in ein div. Wie kann ich JavaScript verwenden, um ein element von DOM aus, dass die AJAX-Antwort HTML? Ich habe JavaScript am Ende des HTML-Antwort zurückgegeben div, sondern getElementById null zurück, offenbar, weil der DOM noch nicht erstellt worden, und ich kann kein Fenster.onload-wie auf einer normalen web-Seite. Sehen eample unten. Und diese werden in JavaScript - keine Bibliotheken. 

<div class="page-content extractAjaxContent" id="tableContent_AJAX">
<div id="name">Biff</div>
    <html:form action="/variableCostStatusPost" method="post">
     ....some JSP to produce HTML
    </html:form>
<script>console.log("Name is " + document.getElementById('name'));</script>
</div>
  • yourdiv.getElementById oder anderen dom-selector-Funktion?
  • Sobald es einfügen in ein DIV, Sie können gewöhnliche DOM-Suche Funktionen wie div.getElementById() zu Holen Elemente.
  • Ich fügte hinzu, ein Beispiel um die Frage, unheld.
  • wie ist das, was du sagst, unterscheidet sich von Dokument.getElementById()?
  • Im Fall von getElementById() gibt es keinen Unterschied zwischen der Anwendung auf document oder div, da IDs eindeutig sein müssen. Aber wenn Sie andere Funktionen nutzen, wie getElementsByClassName(), die Anwendung auf div beschränkt die Suche auf, dass DIV.
  • Alles, was hängt von der Antwort auf AJAX getan werden muss, um in seiner onreadystatechange - handler-Funktion, die nicht in der top-level-Skript-code.
  • In deinem Beispiel-code, welche div bist du einfügen des ajax-response-Daten in? ist es tableContent_AJAX? In deinem Beispiel-code, wie es scheint, Konsole.log-Anweisung ausgeführt, bevor die Antwort eingefügt, in der div. Ihr Anruf zu dokumentieren.getElementById ("name") werden wieder einige Wert nur NACH der Reaktion Hinzugefügt, um das div, so wie Barmar sagte, es sollte getan werden onreadystatechange (d.h. ajax-success-callback-Funktion).
  • Es gibt eine Reihe von Seiten mit AJAX in der app. Es ist ein AJAX-request/response-Funktion. Wenn ich Schreibe das extra-Funktion in der Erfolgs-Methode, wie habe ich es nur laufen, in den paar Fällen benötigt?
  • Also, wenn ich es Recht bekommen, Sie haben 1 gemeinsamen ajax-Funktion, die Sie aufrufen, um Anrufe zu tätigen, um unterschiedliche urls, und Sie müssen führen Sie Ihre spezifischen code getElementById nur für einige Fälle. Und Sie einfügen, wird die Antwort in ein div für ALLE Fälle, und nicht nur einigen wenigen Fällen. Ist das richtig? Ich denke, Sie müssen, um zu wissen, die Antwort, wenn Sie möchten, führen Sie diese neue Funktion, oder Sie können Ihre Funktion akzeptiert eine callback-Funktion (optional), und ausgeführt, dass anstelle der regulären Rückruf. Nun übergeben Sie einen benutzerdefinierten Rückruf von Bereichen, in denen Sie benötigen, um ausführen Ihre speziellen Fall.

InformationsquelleAutor Andrew Koper | 2013-09-27
  1. 0

    Haben Sie zwei Möglichkeiten, je nachdem, welche Browser Sie unterstützen müssen:

    1. Wenn Sie brauchen, um alle Browser zu unterstützen, setzen Sie Ihre console.log - code in der "success" - Funktion, die aufgerufen wird, nachdem der ajax-response. Dadurch wird sichergestellt, es läuft nur nach dem div wird per ajax aktualisiert.

    2. Wenn Sie nur brauchen, um Unterstützung für HTML5-fähige Browser, hören Sie die DOMNodeInserted Ereignis auf den "Namen" div, und anstatt Sie zu verändern, es per innerHTML erstellen, und fügen Sie den html-code-Objekte

    • Sieht aus wie Sie haben, um es zu packen aus dem response-Objekt in der Erfolgs-Methode des AJAX-code.
    InformationsquelleAutor Don Rhummy
  2. 1

    Demo hier: http://jsfiddle.net/wxCJL/1/

    In diesem Beispiel die setTimeout Aufruf simuliert die ajax-Anfrage success Funktion, und die variable responseData ist ein Platzhalter für den HTML-Code vom server zurückgegeben.

    Skript

    function onLoad() {
    var holder = document.getElementById('content');

    //simulate ajax call
    setTimeout(function() {
       //this code will be in the success handler

        var responseData = "<div><strong>Here I Come</strong> to save the day!</div>";
        holder.innerHTML = responseData;
    }, 2500);
}

    Html

    <h1>Hello</h1>
<div>
   Where is the content?
   <span id='content'></span>
 </div>
    • Danke, aber nicht wirklich das, was ich bin reden über. Deines ist eine Variante des Schreibens text in ein div.
    • ich bin mir nicht sicher, warum Sie das so sagen. so fügen Sie ein element an den dom ohne ein framework. die variable responseData ist ein Platzhalter für den HTML-Code von Ihrem server zurückgegeben wird.
    • Ich sehe, was du sagst. Ich habe gerade versucht rückgängig zu machen ist mein downvote, aber SO würde nicht lassen Sie mich.
    • ich bearbeitet meine Antwort, und Sie sollten in der Lage sein zu Stimmen, es
    InformationsquelleAutor Jason
Schreibe einen Kommentar