Im making a chat and i want to limit for example 5 messages to be displayed. This is what i done so far but its not working.

Edited with important stuff.

function print_msg(msg) {
    var output = "";
    const exists = document.querySelectorAll("#chat-ul .id_"   msg['id']).length !==0;
    if (exists) return;
    if(msg["text"].length === 0) return;
        output = "<div class='chat'><span class=id_"   msg['id']  "><img src='../images/avatars/"   msg['avatar']   "' width='36' height='36' class='border border-2 rounded-circle'> <div class='chat-text text-muted'>"   msg["username"]   "<br><div class='text-dark'>"   msg["text"]   "</div></div></span><br></div>";
    $("#chat-ul").append(output);
    var length = document.querySelectorAll("#chat-ul>span").length;
    while (length >5) {
        $('#chat-ul>span:last').hide();
        length--;
    }
    $("#chat-ul").scrollTop($("#chat-ul")[0].scrollHeight);
}

This is the code where message will be displayed:

<div >
        <div >
            <div >Chat</div>
            <div >
                <div id="chat-loader"></div>
                <ul id="chat-ul" style="color:black;"></ul>
            </div>
            <div >
                <div >
                    <div >
                        <input type="text" id="chat-input"  placeholder="Type something...">
                    </div>
                    <div >
                        <button type="submit" id="chat-button" ><i ></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is where chat is getting messages (from database) as you can see it is limited to 5 there, but it must be limited on function print_msg :

if($q == "load") {
    $load = DB::getInstance()->query("SELECT * FROM (SELECT * FROM chat WHERE id > $data ORDER BY id DESC LIMIT 5) AS chat ORDER BY id ASC LIMIT 5");
    if($load->count()){
        $temparray = array();
        foreach($load->results() as $result){
            array_push($temparray, $result); //$row je sve iz baze
            $data = $result->id;
        }
        $retr["data"] = $temparray; // Sve iz baze
        $retr["id"] = $data; // ID text-a
    }else{
        $retr["data"] = array();
        $retr["id"] = $data;
    }
} elseif ($q == "send") {
    $insert = DB::getInstance()->insert('chat', array(
        'text' => trim($data),
        'username' => escape($user->data()->username),
        'avatar' => escape($user->getAvatar())
    ));
}

CodePudding user response：

I've heavily modified your code. Kindly try this and let me know if it helps.

HTML Part

<div >
    <div >
        <div >Chat</div>
        <div >
            <div id="chat-loader"></div>
            <ul id="chat-ul" style="color:black;"></ul>
        </div>
        <div >
            <form id="chat-form">
                <div >
                    <div >
                        <input type="text" id="chat-input"  placeholder="Type something...">
                    </div>
                    <div >
                        <button type="submit" id="chat-button" ><i ></i></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript Part

$(document).ready(function () {
    $("#chat-loader").hide();
    $("#chat-ul").show();

    var curr_id  = 0;
    var messages = [];

    function print_msg() {
        var output = [];

        for(var i=0; i<5 && i<messages.length; i  ){ // select only 5 messages
            var msg = messages[i];
            output.push(`<div >
                        <span class=id_${msg.id}">
                            <img src="../images/avatars/${msg.avatar}" width="36" height="36" >
                            <div >
                                <div>${msg.username}</div>
                                <div >${msg.text}</div>
                            </div>
                        </span><br>
                    </div>`);
        }

        $("#chat-ul").html(output.reverse().join(''));
    }

    function loadOrSend(q, data) {
        return $.ajax({
            type: "POST",
            url: "../includes/chat.php",
            data: {q: q, data: data},
            dataType: "json",
            success: function(retr){
                if( q == 'load' ){
                    curr_id = retr.id;
                    messages = [...retr.data, ...messages];
                    if( retr.data.length > 0 ){
                        print_msg();
                        $('html, body').animate({ // scroll top
                            scrollTop: $("#chat-form").offset().top
                        }, 500);
                    }
                }
            },
        }).fail(function () {
            alert("error: chat can't be loaded!");
        });
    }

    $('#chat-form').submit(function(event){
        event.preventDefault();
        var say = $("#chat-input").val().trim();
        if (say.length > 0) {
            $("#chat-input").val("");
            loadOrSend('send', say).done(() => {
                loadOrSend('load', curr_id);
            });
        }else{
            $("#chat-input").focus();
        }
    });

    loadOrSend('load', curr_id);
    setInterval(() => loadOrSend('load', curr_id), 10000);
});

PHP Part

require_once '../core/init.php';

$user = new User();

$q = $_POST["q"];
$data = $_POST["data"];
$retr = ["data"=>array(), "id"=>0];

if($q == "load") {
    $load = DB::getInstance()->query("SELECT * FROM chat WHERE id > $data ORDER BY id DESC");
    if($load->count()){
        $retr["data"] = $load->results();
        $retr["id"]   = max(array_column($retr["data"], 'id')); // get the last chat id
    }else{
        $retr["data"] = array();
        $retr["id"]   = $data;
    }
} elseif ($q == "send") {
    $insert = DB::getInstance()->insert('chat', array(
        'text' => trim($data),
        'username' => escape($user->data()->username),
        'avatar' => escape($user->getAvatar())
    ));
}

echo json_encode($retr);