Problème d'accès au contenu d'un div lorsque ce contenu provenait d'un appel Ajax

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

  •  09-06-2019
  •  | 
  •  

Question

Voici un exemple très simple de prototype.

Tout ce qu'il fait est, lors du chargement de la fenêtre, un appel ajax qui insère du code HTML dans 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>

Ce qui est déconcertant, c'est le contexte dans lequel Prototype comprend que la div a en fait des choses à l'intérieur.

Si vous examinez la partie onSuccess de l'appel ajax, vous verrez qu'à ce stade, $ ('contenu'). innerHTML contient des éléments.

Cependant, lorsque je vérifie $ ('contenu'). innerHTML juste après l'appel ajax, il semble être vide.

Cela doit être un malentendu fondamental de ma part. Quelqu'un veut-il m'expliquer?

Modifier
Je veux juste clarifier quelque chose. Je me rends compte que l’appel Ajax est asynchrone.

Voici l'ordre dans lequel les choses sont exécutées et pourquoi elles me déroutent:

  1. La page se charge.
  2. La requête Ajax de get-table.php est faite.
  3. L'appel à click1 () INSIDE onSuccess a lieu. Je vois une alerte indiquant que la div a un contenu.
  4. L’appel à click1 () APRES l’appel Ajax. Je vois une alerte indiquant que la div est vide.

Donc, c'est comme si le code s'exécutait dans l'ordre d'écriture mais que le DOM ne se mettait pas à jour dans le même ordre.

Modifier 2 La réponse courte est donc que placer le code dans onSuccess est le bon endroit.

Un autre cas à considérer est celui où vous passez un appel Ajax, puis effectuez un autre appel Ajax à partir du premier appel comme suit: 

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

});

Était-ce utile?

La solution

La première lettre de AJAX signifie "asynchrone". Cela signifie que l’appel AJAX est effectué en arrière-plan, c’est-à-dire que l’appel de requête AJAX renvoie immédiatement . Cela signifie que le code immédiatement après son exécution normale avant que le gestionnaire onSuccess soit appelé (et avant même que la demande AJAX soit terminée).

Prise en compte de votre question modifiée: dans certains navigateurs (par exemple, Firefox), les boîtes d’alerte ne sont pas aussi modales que vous le pensez. Le code asynchrone peut faire apparaître une boîte d’alerte même si une autre est déjà ouverte. Dans ce cas, le nouveau message d’alerte (celui du code asynchrone) s’affiche au-dessus de l’ancien. Cela crée l’illusion que le code asynchrone a été exécuté en premier.

Autres conseils

Sans avoir essayé votre code: l'appel AJAX est exécuté de manière asynchrone. Cela signifie que votre Ajax.Request se déclenche, puis passe à l'appel click1 () qui vous indique que la div est vide. À un moment donné, la demande Ajax est terminée et le contenu est réellement placé dans le div. À ce stade, la fonction onSuccess est exécutée et vous obtenez le contenu que vous attendiez.

C'est un appel Ajax, qui est asynchrone. Cela signifie que juste après l'appel de la requête, la réponse n'est pas encore revenue, c'est pourquoi $ ('contenu') est toujours vide.

L'élément onSuccess de l'appel de fonction que vous effectuez pour gérer l'appel AJAX est exécuté au moment où vous recevez une réponse de get-table.php. Il s'agit d'une fonction Javascript distincte que vous indiquez au navigateur d'appeler lorsque vous obtenez une réponse de get-table.php. Le code situé sous votre appel AJAX.Request est accessible dès que l'appel AJAX.Request est effectué, mais pas nécessairement avant l'appel de get-table.php. Donc oui, je pense qu'il existe un malentendu fondamental sur le fonctionnement d'AJAX, probablement en raison de l'utilisation d'une bibliothèque pour masquer les détails.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top