0

I am using a PHP Ajax solution for my chat within my web application. The chat looks very neat, however I am running into a big problem when inside the chat room. I am using a setInterval to get new messages but when the interval runs every second the page ends up jumping to the very first message. This happens every single second preventing the user from seeing the latest message. Here is the script I am running: 

<?php
    $id = $_GET['id'];
    echo
    "<script>

        function ajax() {
            var req = new XMLHttpRequest();

            req.onreadystatechange = function () {
                if(req.readyState == 4 && req.status==200){
                    document.getElementById('content').innerHTML = req.responseText;
                }
            }
            req.open('GET', 'process.php?id=$id',true);
            req.send();
        }
        setInterval(function () {
            ajax();
        }, 1000);
    </script>
";
    ?>

Here is my HTML where the content is being loaded: 

<div class="card bg-sohbet border-0 m-0 p-0" style="height: 100vh;">
        <div id="sohbet" class="card border-0 m-0 p-0 position-relative bg-transparent" style="overflow-y: auto; height: 100vh;" onload="ajax();">
            <div id="content"></div>
       </div>
 </div>

I have tried using setTimeout/clearTimeout, event.preventDefault() and return false;. None of these solutions have worked. If you could help it would be greatly appreciated.

Please checkout this video link for an example: https://www.hippovideo.io/video/play/gO83luY-81NfIeSeltBW-Q

Solomon Antoine
  • 554
  • 1
  • 7
  • 14
  • This is because of every time you change the `id="content"`. – Shahaji Deshmukh Oct 17 '18 at 05:34
  • How should I go about editing that? – Solomon Antoine Oct 17 '18 at 05:35
  • Possible duplicate of [Scroll Automatically to the Bottom of the Page](https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) – M. Eriksson Oct 17 '18 at 05:37
  • 1
    I would also recommend looking into sockets for this instead of polling the server every second. If you don't want that, you should at least just fetch the new messages since last time you checked (you can go by ID) and just append those to the bottom of the chat list instead of replacing all content in the div. – M. Eriksson Oct 17 '18 at 05:38
  • By appending the new message after latest message. – Shahaji Deshmukh Oct 17 '18 at 05:38
  • Are you fine with loading the whole data to the chat box every 1 sec? If I may suggest, once you get the data, filter it with your current displayed data, and only prepend/append the new message to your chatbox. – Jerdine Sabio Oct 17 '18 at 05:39
  • _Side note:_ Avoid outputting large blocks of HTML/JS in an `echo` using PHP. It's better to end the PHP block `?>` and output the HTML/JS since IDE's usually don't syntax highlight PHP strings correctly, which makes it much harder to debug/read. – M. Eriksson Oct 17 '18 at 05:43
  • @JerdineSabio I tried using the append/prepend method and it printed my html as plain text so that solution is out the door – Solomon Antoine Oct 17 '18 at 05:51
  • Try `document.getElementById('content').insertAdjacentHTML('beforeend', req.responseText);` – Nick Oct 17 '18 at 05:57
  • @JerdineSabio I use PHP Storm so it isn't much of an issue. But the potential duplicate didn't have an answer I was looking for. As for the websockets I will take a look into it but I am seeking an immediate solution, `append` didn't give me any luck. – Solomon Antoine Oct 17 '18 at 05:57
  • Did you actually check the suggested duplicate? – M. Eriksson Oct 17 '18 at 06:01
  • @MagnusEriksson yeah I tried using `window.scrollTo(0,document.body.scrollHeight);` and `$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");` but they didn't work – Solomon Antoine Oct 17 '18 at 13:20

0 Answers0