Problem, den Inhalt eines div zugreifen, wenn diese Inhalte von einem Ajax-Aufruf kamen

StackOverflow https://stackoverflow.com/questions/75181

  •  09-06-2019
  •  | 
  •  

Frage

Hier ist ein sehr einfaches Beispiel Prototype.

Alles, was sie tut, ist, auf Fenster Last, ein Ajax-Aufruf, die einige HTML-Code in einem div klebt. 

<html>
    <head>
        <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window, 'load', function(){
                new Ajax.Request('get-table.php', {
                    method:  'get',
                    onSuccess:  function(response){
                        $('content').innerHTML = response.responseText;
                        //At this call, the div has HTML in it
                        click1();
                    },
                    onFailure:  function(){
                        alert('Fail!');
                    }
                });
                //At this call, the div is empty
                click1();
            });

            function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
        </script>
    </head>
    <body><div id="content"></div></body>
</html>

Die Sache, die verwirrend ist der Kontext, in dem Prototyp versteht, dass die div Zeug tatsächlich hat in ihm.

Wenn Sie an der onSuccess Teil des Ajax-Aufruf sehen Sie, dass an diesem Punkt $ sehen werden ( ‚content‘). Innerhtml hat Sachen drin.

Allerdings, wenn ich $ überprüfen ( 'content'). Innerhtml direkt nach dem Ajax-Aufruf, scheint es leer zu sein.

Das hat einige grundlegende Missverständnis meinerseits sein. Wer Pflege, es mir zu erklären?

Bearbeiten
Ich möchte nur etwas klären. Ich stelle fest, dass die Ajax-Aufruf asynchron ist.

Hier ist die tatsächliche Reihenfolge, dass die Dinge ausgeführt werden und warum es ist verwirrend für mich:

  1. Die Seite geladen wird.
  2. Die Ajax-Anfrage zu erhalten-Table.php wird.
  3. Der Aufruf von click1 () INSIDE onSuccess geschieht. Ich sehe eine Warnung, dass die div Inhalt hat.
  4. Der Aufruf von click1 () nach dem Ajax-Aufruf geschieht. Ich sehe eine Warnung, dass die div leer ist.

So ist es wie der Code in der Reihenfolge ausgeführt wird es geschrieben ist, aber das DOM ist nicht in der gleichen Reihenfolge zu aktualisieren.

Edit 2 So die kurze Antwort ist, dass Sie den Code in onSuccess setzen ist der richtige Ort.

Ein weiterer Fall zu prüfen, ist die, wo Sie einen Ajax-Aufruf zu tun und dann von der onSuccess des ersten Aufrufs wie folgt einer anderen Ajax-Aufruf tun: 

new Ajax.Request('foo.php',{
  method:  'get',
  onSuccess:  function(response){
    doAnotherAjaxCall();
  }
  });

function doAnotherAjaxCall(){
  new Ajax.Request('foo.php',{
    method:  'get',
    onSuccess:  function(response){
      //Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
      //needs to happen here!
    }
  });
}

});

War es hilfreich?

Lösung

Der erste Buchstabe von AJAX steht für „asynchron“. Dies bedeutet, dass der AJAX-Aufruf im Hintergrund ausgeführt wird, das heißt, den AJAX-Request Anruf sofort zurück . Dies bedeutet, dass der Code unmittelbar nach dem es in der Regel tatsächlich ausgeführt vor die onSuccess Handler aufgerufen werden (und bevor der AJAX-Request hat sogar fertig).

Unter Berücksichtigung Ihrer editierten Frage: in einigen Browsern (z Firefox), Alertbox nicht modal sind, wie Sie vielleicht denken. Asynchronous-Code kann ein Warnfeld auftauchen, auch wenn ein anderer bereits geöffnet ist. In diesem Fall wird die neuere Alert-Box (die aus dem asynchronen Code) auf der Oberseite der eine älteren angezeigt. Dies schafft die Illusion, dass der asynchrone Code wurde zuerst ausgeführt.

Andere Tipps

Ohne Code versucht zu haben: Der AJAX-Aufruf asynchron ausgeführt wird. Was bedeutet, dass Ihr Ajax.Request Feuer, geht dann weiter zu dem click1 () -Aufruf, dass Sie die div leer erzählt. An einem gewissen Punkt nach, dass die Ajax-Anfrage beendet ist und der Inhalt wird tatsächlich in den div setzen. An dieser Stelle wird die onSuccess Funktion ausgeführt und den Inhalt erhalten Sie erwartet.

Es ist Ajax-Aufruf, die asynchron ist. Das bedeutet, dass unmittelbar nach diesem Antrag Anruf Antwort noch nicht zurückkommen, das ist, warum $ ( ‚Inhalt‘) ist noch leer.

Das onSuccess Element der Funktion aufrufen, die Sie machen die AJAX-Aufruf zu handhaben ist, zu der Zeit ausgeführt erhalten Sie eine Antwort von get-Table.php. Dies ist eine separate Javascript-Funktion, die Sie den Browser sagen zu rufen, wenn Sie eine Antwort von get-Table.php bekommen. Der folgende Code Ihres Ajax.Request Anruf wird, sobald der Anruf Ajax.Request zugegriffen wird, aber nicht unbedingt vor get-Table.php aufgerufen. Also ja, ich denke, es ist ein bisschen wie ein grundsätzliches Missverständnis, wie AJAX arbeitet, wahrscheinlich aufgrund einer Bibliothek mit den Details zu verbergen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top