附加最后一条消息一次

Question

Hello guys i am trying to build a chat with Jquery , php , ajax and mysql the problem that i am facing since few days is that when i get the value of the last message its keep getting append to the div what i want is to append the last message only once , and append again if there is a new message here is my ajax call

var chat = "";
     $.ajax({
            url: "php/gt_user.php",
            type: "get",
            success: function (result) {
                var gtUser = $.parseJSON(result);
                $.each(gtUser, function (idx, obj) {
                    var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                    usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>";
                    $('.userarea').append(usrApp);
                }); // here i get all the username who sent a message and print them on a div
                $('.userarea span').on('click', function () {
                    $('.msgarea').html("");
                    var usrName = $(this).text();
                    $('#usrname').text(usrName);
                    setInterval(function () {
                        $.ajax({
                            url: "php/admin_msg.php",
                            type: "post",
                            data: {
                                name: usrName
                            },
                            success: function (result) {
                                var lastmsg = result;

                                function appedn() {
                                    var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                                    usrMsg += "<span><p>" + lastmsg + "</p></span></div>";
                                    $('.msgarea').append(usrMsg);
                                }

                                if (chat !== result) {
                                    appedn();

                                } else {
                                    chat = result;
                                }

                            }

                        });
                    }, 2000);


                });
            }
        });

the respanse from php/admin_msg.php is working and i got the last message sucessfully the problem is that this script keep adding the same message to the message area , and what i want is to added the message only once if there is a new one

Answer 1

You need to somehow identify last message that is already appended to your html the best would be some id sent from server. So your message div should containt some data-id attribute, and then when you ask for next message get last children of $('.msgarea') element, read it data-id and compare with current one.

Another thing I would recommend to moving to some view library or framework, react, angular, vue or whatever. It gets complicated when you want to manage such features with pure jQuery.