Scroll to bottom of item on Ajax load

Question

I am creating a kind of messaging system with php and jQUERY, when you click on users profile and hit the messaging button it take us to the message page, it takes about 2sec to load previous message, so I added a code to scroll to bottom of the div class containing all message item once the ajax is loaded, to show latest messages , but the problem I am having is when I try to scroll up back I am having issues , the moment i try to scroll up due to the code i added it goes down on its own, any solution would be well appreciated.

Here is my JQ code - if there is anything else I can provide to help me solve this issue, I would do so quickly.

$(document).ready(function(){
    /*post message via ajax*/
    //get message
    var c_id = $("#conversation_id").val();
    //get new message every 2 second
    setInterval(function(){
    $(".display-message").load("get-message-ajax.php?c_id="+c_id , stateChange);
    }, 2000);
});

function stateChange() {
    var newstate = true;
    if(newstate = true){
    $(".conversation_history.clearfix").animate({
  scrollTop: $('.conversation_history.clearfix')[0].scrollHeight - $('.conversation_history.clearfix')[0].clientHeight
}, 1000)} else { 
    $(".conversation_history.clearfix").end();
            var newstate = false;
        }
}

Code from get_message-ajax.php

<?php

include 'db.php';
include 'function.php';
/*Get Message*/ 


if(isset($_GET['c_id'])){
    $conversation_id = base64_decode($_GET['c_id']);
    $querynew = "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'";
    $mysqli_q_new = mysqli_query($connection, $querynew);
    confirmQuery($mysqli_q_new);
    if (mysqli_num_rows($mysqli_q_new) > 0 ){

        while($user_real_info = mysqli_fetch_assoc($mysqli_q_new)){
        $trap_user_from = $user_real_info['user_from'];
        $trap_user_to = $user_real_info['user_to'];
        $trap_user_message = $user_real_info['message'];

            $querynew2 = "SELECT profile_image,firstname FROM `users` WHERE id='$trap_user_from'";
            $mysqli_q_new2 = mysqli_query($connection, $querynew2);
            confirmQuery($mysqli_q_new2);

            $user_fetch =  mysqli_fetch_assoc($mysqli_q_new2);
            $user_form_username = $user_fetch['firstname'];
            $user_form_img = $user_fetch['profile_image'];

            ?>

            <div class='conversation_history_inner clearfix'>

                <span><?php echo $user_form_username; ?> </span>
                    <div class='converstion_history_image img-is-responsive pull-left'>

                        <?php echo getUserImage($user_form_img)  ?>
                    </div>
                  <div class='converstion_history_chat'>
                     <p><?php echo $trap_user_message; ?></p>
                  </div>
            </div>




            <?php
        }

    }
} else {
    echo 'nth found';
}

?>

What is `newstate` supposed to be used for? In the code you've shown it is always set to true and doesn't seem to have any purpose. Since it's always true, the `else` part in `stateChange` never executes. — Tropic, Apr 02 '18 at 14:22

score 1 · Answer 1 · answered Apr 02 '18 at 14:41

1

I'm assuming you only want to scroll down when it gets the first message. If so, I would suggest changing the stateChange function into this:

var scrolled = false;

function stateChange() {
    if(!scrolled){
        $(".conversation_history.clearfix").animate({scrollTop: $('.conversation_history.clearfix')[0].scrollHeight - $('.conversation_history.clearfix')[0].clientHeight}, 1000);
        scrolled = true;
    }
}

This will make it only scroll down the first time it gets a new message instead of every time like it currently does.

answered Apr 02 '18 at 14:41

Tropic

127
3
6

thank you sir, is there any more code i can add to auto scroll down to show new messages. – Neon Emmanuel Apr 02 '18 at 14:46
I thought you only wanted it to scroll down once? – Tropic Apr 02 '18 at 14:49
what i want is that at first when user enters the page it auto scrol to the bottom to show newer messages , and then when a new message comes in, it auto scroll to the bottom of the page and den displays the message – Neon Emmanuel Apr 02 '18 at 14:54

score 0 · Answer 2 · answered Apr 02 '18 at 14:27

0

The content is scrolling to bottom automatically because you have used setInterval function which will trigger at a constant interval of time. Use setTimeOut instead it will call only once after the specified time. Look here for more details

answered Apr 02 '18 at 14:27

Nitheesh

19,238
3
22
49

I think it's supposed to be `setInterval` though, because the comment above says it's supposed to get a new message every 2 seconds. – Tropic Apr 02 '18 at 14:29
exactly, i set it to search for new message every two secounds, i dont know how to enable scrool to top, or if there is another better way to do this , maybe php and mysqli has a way to pull data from DB after x amount of time. – Neon Emmanuel Apr 02 '18 at 14:33
If you are specific about checking the new message in every 2 seconds, then search for the length of the api response. If the response has more than one count of the message, only then scroll to bottom. – Nitheesh Apr 02 '18 at 14:36
is this the best method to build a live messaging chat app, or is there anoda way, my biggest problem is auto scrolling to the bottom on new messgae, which seems to solve a problem and create another problem – Neon Emmanuel Apr 02 '18 at 14:42
@NeonEmmanuel What exactly do you want to happen when a new message comes? Do you only want it to scroll down when it receives the first message? Or do you want it to do something else? – Tropic Apr 02 '18 at 14:45
@tropic i really appreciate your help, what i want is that at first when user enters the page it auto scrol to the bottom to show newer messages , and then when a new message comes in, it auto scroll to the bottom of the page and den displays the message – Neon Emmanuel Apr 02 '18 at 14:49
@NeonEmmanuel Ok then what is the problem? Is the problem that it scrolls even when there is no new message? – Tropic Apr 02 '18 at 14:51
exactly sir, the problem is since the ajax function auto reloads after every 2 secounds, when i try to scorll up say to read older message, it scrolls down automatically – Neon Emmanuel Apr 02 '18 at 14:53
@NeonEmmanuel Ok can you edit your post to include the code from the `get-message-ajax.php` file as well? – Tropic Apr 02 '18 at 14:56

Scroll to bottom of item on Ajax load

2 Answers2