Problema al acceder al contenido de un div cuando ese contenido provino de una llamada Ajax

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

  •  09-06-2019
  •  | 
  •  

Pregunta

Aquí hay un ejemplo de prototipo muy simple.

Todo lo que hace es, al cargar la ventana, una llamada ajax que inserta algo de html en 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>

Lo que es confuso es el contexto en el que Prototype entiende que el div realmente tiene cosas dentro.

Si observa la parte onSuccess de la llamada ajax, verá que en ese punto $('content').innerHTML tiene cosas.

Sin embargo, cuando reviso $('content').innerHTML justo después de la llamada ajax, parece estar vacío.

Tiene que haber algún malentendido fundamental por mi parte.¿Alguien quiere explicármelo?

Editar
Sólo quiero aclarar algo.Me doy cuenta de que la llamada Ajax es asincrónica.

Este es el orden real en el que se ejecutan las cosas y por qué me resulta confuso:

  1. La página se carga.
  2. Se realiza la solicitud Ajax a get-table.php.
  3. Se produce la llamada a click1() DENTRO de onSuccess.Veo una alerta de que el div tiene contenido.
  4. La llamada a click1() DESPUÉS de la llamada Ajax ocurre.Veo una alerta de que el div está vacío.

Entonces es como si el código se ejecutara en el orden en que fue escrito pero el DOM no se actualizara en el mismo orden.

Editar 2Entonces, la respuesta corta es que poner el código en onSuccess es el lugar correcto.

Otro caso a considerar es aquel en el que haces una llamada Ajax y luego haces otra llamada Ajax desde el onSuccess de la primera llamada así:

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

});

¿Fue útil?

Solución

La primera letra de AJAX significa "asíncrono".Esto significa que la llamada AJAX se realiza en segundo plano, es decir.la llamada de solicitud AJAX regresa inmediatamente.Esto significa que el código inmediatamente después normalmente se ejecuta. antes se llama al controlador onSuccess (e incluso antes de que finalice la solicitud AJAX).

Teniendo en cuenta su pregunta editada:en algunos navegadores (p. ej.Firefox), los cuadros de alerta no son tan modales como podría pensar.El código asincrónico puede mostrar un cuadro de alerta incluso si ya hay otro abierto.En ese caso, el cuadro de alerta más nuevo (el del código asincrónico) se muestra encima del anterior.Esto crea la ilusión de que el código asincrónico se ejecutó primero.

Otros consejos

Sin haber probado tu código:La llamada AJAX se ejecuta de forma asíncrona.Lo que significa que su Ajax.Request se activa y luego continúa con la llamada click1() que le indica que el div está vacío.En algún momento después de eso, la solicitud de Ajax finaliza y el contenido se coloca en el div.En este punto se ejecuta la función onSuccess y obtienes el contenido que esperabas.

Es una llamada Ajax, que es asincrónica.Eso significa que justo después de esa llamada de solicitud, la respuesta aún no ha regresado, es por eso que $('content') todavía está vacío.

El elemento onSuccess de la llamada a la función que estás realizando para manejar la llamada AJAX se ejecuta en el momento en que recibes una respuesta de get-table.php.Esta es una función de Javascript separada que le indica al navegador que llame cuando obtenga una respuesta de get-table.php.Se accede al código debajo de su llamada AJAX.Request tan pronto como se realiza la llamada AJAX.Request, pero no necesariamente antes de llamar a get-table.php.Así que sí, creo que hay un malentendido fundamental sobre cómo funciona AJAX, probablemente debido al uso de una biblioteca para ocultar los detalles.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top