Scrollbar wont Update

[Bobface]

Hello,

I'm building a little chat for 2 people and wanted to use a custom scrollbar. Now the chat is updated every 5 seconds. When I first initialize mCustomScrollbar() everything works fine, but once the chat is updated, the scollbar disappears and messes up the css of the chat.

var msgrun = 0;

function getMessages()
{

    $.get( "request/getMessages.php", function( data ) {
        var rJson = JSON.parse(data);

        if(rJson["login"] == "redo")
            document.location.href = "../login.php";

        //$("#chat_messages").html("");

        var i = 0;
        var c = 0;
        var sappend = "";
        while(typeof(rJson[i]) != "undefined" && rJson[i] !== null)
        {
            var rs;
            if(rJson[i][4] == true)
            {
                rs = "bkg_green";
            } else {
                rs = "bkg_red";

                if(rJson[i][5] == false)
                {
                    c++;
                }

            }

            sappend += "<div class='chat_singlemessage'><div class='floatleft'><strong>["+timeConverter(parseInt(rJson[i][0]))+"] "+rJson[i][1]+":</strong> "+rJson[i][2]+"</div><div class='read_state "+rs+"'><div class='hiddenDiv'>"+rJson[i][3]+"</div></div><div class='clear'></div></div>"; 
            i++;
        }

        $("#chat_messages").html(sappend).off().on('click', '.chat_singlemessage', function() {
            $.get( "request/setReadState?id="+$(this).children(".read_state").children(".hiddenDiv").text(), function( data ) {
                var rJson = JSON.parse(data);
                if(rJson["login"] == "redo")
                    document.location.href = "../login.php";

                getMessages();
            });
        });

        if(msgrun == 0)
        {
            $("#chat_messages").mCustomScrollbar({
                theme:"minimal",
                advanced: { 
                    updateOnContentResize: true
                },
                callbacks: {
                    onUpdate: function(){alert("IM UPDATED");}
                }

            });
            msgrun++;
        } else {
            alert("about to update..");
            $("#chat_messages").mCustomScrollbar('update');
        }

    });
}

getMessages(); 

setInterval(function() {
    getMessages();
}, 5000);

All of this is inside $(document).ready. So when I open the page, the chat is displayed with the nice scrollbar, then after 5 seconds getMessages() gets called a second time, so this time $("#chat_messages").mCustomScrollbar('update'); shall be run. But it seems like it's not updating. To check it I used callbacks: { onUpdate: function(){alert("IM UPDATED");} } But nothing appears besides "about to update..". I hope someone has an answer for me, I'd really like to use the scrollsbars they look really nice :)

BTW: I eddited the CSS of the minimal thema, I set the margin to 2% 0. Maybe that's important.

[malihu]

Hello,

Normally you don't need $("#chat_messages").mCustomScrollbar('update');

The scrollbar disappears because you need to change:
$("#chat_messages").html(sappend) to: $("#chat_messages .mCSB_container").html(sappend)

By appending the new content directly in #chat_messages, scrollbar markup gets removed. .mCSB_container is the div that holds your actual/original content after the scrollbar has initialized, so you need to append the new content to it.