Problema di accesso al contenuto di un div quando tale contenuto proviene da una chiamata Ajax

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

  •  09-06-2019
  •  | 
  •  

Domanda

Ecco un esempio di prototipo molto semplice.

Tutto ciò che fa è, al caricamento della finestra, una chiamata ajax che inserisce un po' di codice HTML in un div.

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

La cosa che crea confusione è il contesto in cui Prototype capisce che il div contiene effettivamente delle cose.

Se guardi la parte onSuccess della chiamata ajax, vedrai che a quel punto $('content').innerHTML contiene qualcosa.

Tuttavia quando controllo $('content').innerHTML subito dopo la chiamata ajax, sembra essere vuoto.

Questo deve essere un malinteso fondamentale da parte mia.Qualcuno ha voglia di spiegarmelo?

Modificare
Voglio solo chiarire una cosa.Mi rendo conto che la chiamata Ajax è asincrona.

Ecco l'ordine effettivo in cui le cose vengono eseguite e perché mi crea confusione:

  1. La pagina viene caricata.
  2. Viene effettuata la richiesta Ajax a get-table.php.
  3. Si verifica la chiamata a click1() INSIDE onSuccess.Vedo un avviso che indica che il div ha del contenuto.
  4. La chiamata a click1() DOPO la chiamata Ajax avviene.Vedo un avviso che il div è vuoto.

Quindi è come se il codice venisse eseguito nell'ordine in cui è scritto ma il DOM non si aggiornasse nello stesso ordine.

Modifica 2Quindi la risposta breve è che inserire il codice in onSuccess è il posto corretto.

Un altro caso da considerare è quello in cui si esegue una chiamata Ajax e poi si esegue un'altra chiamata Ajax dall'onSuccess della prima chiamata in questo modo:

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!
    }
  });
}

});

È stato utile?

Soluzione

La prima lettera di AJAX sta per "asincrono".Ciò significa che la chiamata AJAX viene eseguita in background, ad es.la chiamata di richiesta AJAX ritorna immediatamente.Ciò significa che il codice immediatamente successivo viene normalmente effettivamente eseguito Prima viene chiamato il gestore onSuccess (e prima ancora che la richiesta AJAX sia terminata).

Tenendo conto della tua domanda modificata:in alcuni browser (es.Firefox), le caselle di avviso non sono così modali come si potrebbe pensare.Il codice asincrono potrebbe far apparire una finestra di avviso anche se ne è già aperta un'altra.In tal caso, la casella di avviso più recente (quella del codice asincrono) viene visualizzata sopra quella precedente.Ciò crea l'illusione che il codice asincrono sia stato eseguito per primo.

Altri suggerimenti

Senza aver provato il tuo codice:La chiamata AJAX viene eseguita in modo asincrono.Ciò significa che il tuo Ajax.Request si attiva, quindi passa alla chiamata click1() che ti dice che il div è vuoto.Ad un certo punto, la richiesta Ajax viene completata e il contenuto viene effettivamente inserito nel div.A questo punto viene eseguita la funzione onSuccess e ottieni il contenuto previsto.

È una chiamata Ajax, che è asincrona.Ciò significa che subito dopo la chiamata di richiesta, la risposta non è ancora arrivata, ecco perché $('content') è ancora vuoto.

L'elemento onSuccess della chiamata alla funzione che stai effettuando per gestire la chiamata AJAX viene eseguito nel momento in cui ricevi una risposta da get-table.php.Questa è una funzione Javascript separata che stai dicendo al browser di chiamare quando ricevi una risposta da get-table.php.È possibile accedere al codice sotto la chiamata AJAX.Request non appena viene effettuata la chiamata AJAX.Request, ma non necessariamente prima che venga chiamato get-table.php.Quindi sì, penso che ci sia un malinteso fondamentale su come funziona AJAX, probabilmente dovuto all'utilizzo di una libreria per nascondere i dettagli.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top