Salut,

J'ai créé un tchat, mais je n'arrive pas à faire démarrer le scroll en bas.

J'ai essayé avec :

const chatScroll = document.getElementById('infiniteScroll');

function bottomScroll() {

  chatScroll.scrollTop = chatScroll.scrollHeight;

}

(avec ou sans fonction)

Et ça ne fonctionne pas. Pourtant après quelques recherches on dirait que c'est bien comme ça qu'il faut faire.

Voilà tout mon code pour le tchat :

JS

const chatScroll = document.getElementById('infiniteScroll');

$('#submit').click(function(event){
  event.preventDefault(); // On empêche l'envoi du formulaire

  let pseudo = encodeURIComponent( $('#pseudo').val() );
  let message = encodeURIComponent( $('#message').val() );


  if(pseudo != "" && message != ""){ // On vérifie que les variables ne sont pas vide

    $.ajax({
      url : "minichat.php",
      type : "POST",
      data : "pseudo=" + pseudo + "&message=" + message //Envoi des données côté serveur
    });

  }
});

function charger(){

    setInterval(function(){

    $('#messages').load("minichat.php");

  },1000);

}



function bottomScroll() {

  chatScroll.scrollTop = chatScroll.scrollHeight;

}


/*
chatScroll.addEventListener('scroll', function() {
  if (chatScroll.scrollTop + chatScroll.clientHeight >= chatScroll.scrollHeight) {

   //fonction pour récupérer les messages

  }
});*/

document.addEventListener("DOMContentLoaded", ()=> {

  charger();
  bottomScroll();
  
});

HTML

<aside class="miniChat">

  <h4>Mini Chat</h4>
  <div id="infiniteScroll">
    <table class="table_chat">
        <tbody id="messages">

        </tbody>
    </table>
  </div>

  <form class="form_chat" action="minichat.php" method="post">

      <ul>
        <li>
          <!--<label for="pseudo">Pseudo :</label>-->
          <input  id="pseudo" type="text" name="pseudo" maxlength="20" placeholder="Pseudo :">
        </li>
        <li>
          <!--<label for="message">Message :</label>-->
          <textarea id="message" name="message" maxlength="250" placeholder="Écrivez votre message ici :"></textarea>
        </li>
        <li>
          <button id="submit" type="submit">Envoyer</button>
        </li>
      </ul>

  </form>

</aside>

PHP

if (empty($_POST)) {

  //$query = $pdo->query("DELETE FROM mini_chat WHERE message_date < DATE_SUB(NOW(), INTERVAL 1 DAY)");

  // Récupération des messages dans la BDD
  $query = $pdo->prepare('SELECT * FROM mini_chat ORDER BY id_message LIMIT 0, 20');
  $query -> execute();


  $messages = NULL;

  while($responses = $query->fetch()){

    $messages .= "<tr id=" . $responses['id_message'] . "><td>" . $responses['message_date'] . "</td><td>" . $responses['pseudo'] . "</td><td>" . $responses['message'] . "</td></tr>";

  }

  echo $messages;


} else if (!empty($_POST['pseudo']) AND !empty($_POST['message'])){

  $message = $pdo->prepare('INSERT INTO mini_chat (pseudo, message, message_date) VALUES(?, ?, NOW())');
  $message->execute(array_values($_POST));


} else {

  echo "Vous avez oublié de remplir un des champs";

}

J'arrive pas à voir d'où pourrait venir le problème

Et ensuite j'aimerais faire un scroll infini, qui me récupère les 20 précédents messages dans la BDD à chaque fois. Mais je vois pas trop sur quoi partir. J'ai un micro début avec ma partie commenté en JS mais pas plus.

Si vous pouviez m'aiguiller ce serait cool

Merci.

EDIT :

Pour l'infinite scroll j'ai trouvé je pense :

JS

chatScroll.addEventListener('scroll', function() {
  if (chatScroll.scrollTop + chatScroll.clientHeight >= chatScroll.scrollHeight) {

    $.ajax({
      url : "scrollLoad.php?lastID=" + $("#messages tr:last").attr("id"),
      type : "GET",
      success : function(html){

        if(html){

          $('#messages').append(html);

        }

      }
    });

  }
});

PHP

if ($_GET['lastID']) {

  $query = $pdo->prepare('SELECT * FROM mini_chat WHERE id_message > '.$_GET['lastID'].' ORDER BY id_message LIMIT 0, 20');
  $query -> execute();


  $messages = NULL;

  while($responses = $query->fetch()){

    $messages .= "<tr id=" . $responses['id_message'] . "><td>" . $responses['message_date'] . "</td><td>" . $responses['pseudo'] . "</td><td>" . $responses['message'] . "</td></tr>";

  }

  echo $messages;

}

Bon faut que j'inverse le tout, car la ça me récup les messages les plus récents comme ça, pas les plus anciens. Mais plus trop le temps ce soir, et je préfère d'abord faire en sorte que le scroll parte du bas. Mais pour ça, toujours aucune idée.

-
Edité par Fnockle 20 avril 2018 à 21:01:19