Comment actualiser une partie d'une page html automatiquement?

bonjour, voilà en faite je travail sur une sorte de chat en direct mais pour voir les messages les plus récents envoyé il faut actualisé la page, seul probleme c’est que je ne sais pas comment actualiser seulement le div qui contient les message, auriez vous une solution?

oui j’ai essayé l’ajax, mais je ne sais pas quoi mettre .load(ICI );
quelle partie de mon code dois je mettre?

vous pouvez m’aider? :sweat_smile:

<button type="submit" id="refresh">Envoyer</button>

<script>
    $(function() {
      $("#refresh").click(function(evt) {
         $("#actuallisez_moi").load("index.php") 
         evt.preventDefault();
      })
    })
</script>

Remplacer le fichier index.php par le nom de fichier qui contient le div que vous souhaitez actualiser.

ooh mercii je vais tester sa tt de suite, et savez vous comment je pourrai faire sa automatiquement sans bouton? et donc je veux actualiser se div, j seulement a le copier dans un fichier php indépendant c sa?

Oui, vous pouvez le mettre dans un fichier indépendant et après vous pouvez l’inclure dans le fichier principale.

Pour auto-refresh le div utilisez la méthode setInterval() voir l’exemple suivant:

$(document).ready(function() {
  setInterval(function() {
    $('#actuallisez_moi').load('index.php');
  }, 3000); 
});

Vous pouvez changer l’intervalle d’actualisation 3000.

merci je vais voir tout ça maintenant

j’ai essayé de refresh automatiquement la page comme vous me l’avez dis
il se fait tard, je pense que j’ai du faire une ou plusieurs erreurs comme toujours voici mon code maintenant:

ainsi que mon fichier « load.php »:

<p>
  <?php  echo $msg['chat'][$i]['message']; ?>
    
</p>
<span 
     class="time-right"><?php  echo $msg['chat'][$i]['pseudo']." &mdash; ".$msg['chat'][$i]['date'];?>
                    
</span>

ou je me suis planté? :sweat_smile:
toute les 3s effectivement il arrive a quelque chose mais pour une raison qui m’est inconnu il m’affiche une erreur

(ps: merci du temps que vous me consacrez)

Vous pouvez me montrer l’erreur pour avoir une idée de ce qui ce passe.

bien sur la voici, elle s’affiche dans les tout premiers messages a 3s de l’ouverture de la page

et voici a quoi ressemble la page sans erreurs (ici, capture d’écran de la fin de la page)

en faite c la variable « msg » qui n’a pas été définis elle est seulement définit dans la page principal (je pense), comment pourrais je faire?

Vous devez ajouter ce code

ssss

Dans le fichier load.php parce que la variable $msg n’est pas définit.

au final pour $i j’ai du mettre aussi le for (je ne sais pas si c’est bien ou pas)


mais j’ai une dernière erreur « Parse error : erreur de syntaxe, fin de fichier inattendue dans C:\wamp64\www\ptit_chat\load.php à la ligne 34 »

oooh je vois :sweat_smile: mais du coup je la met ou car dans mon code de base c’était agencé comme cela

j’ai agencé le fichier comme cela (en m’apercevant de quelques erreurs)


il n’y a plus d’erreur cependant je n’ai pas l’impression que cela marche

par contre si on remonte, au bout de 3s une « box » se crée contenant les premiers messages seulement

Tu peux s’inspirer de ce code, il est proche de ce que vous voulez achever:

Je te recommande d’utiliser la méthode $.ajax() au lieu de .load() c’est plus pratique, voir le code de l’application ci-dessus.

    setInterval(function(){
      $.ajax({
          url:'chat.php',
          data:{get:true},
          method:'post',
          success:function(data){
            $('#result').html(data);
          }
      })
    },1000);

oooh merci infiniment!! j’ai réussi a le faire marcher! en faite je n’avais pas vue mais j’avais laisser le code en doublon dans ma page principal, et donc se code s’executait avant lui, et on le voyais dans les premier messages, enfin bon merci merci merciiiiiiiiiiii, j’ai juste eu a supp une partie de mon code en doublon pour que sa marche parfaitement!! et tout sa c grace a vous​:laughing::+1:, merci Michel mais au final j’ai réussi a me débrouiller sans merci a vous deux en tt cas

1 « J'aime »

regarde cette vidéo pour voir comment actualiser une partie de la page à chaque seconde

1 « J'aime »