动态填充用户

Question

I creating a chat system with the Facebook layout where you have the name listed on the right and the chat boxes popup when the names on the right gets clicked. The system currently works where the list on the right with users are set by me gor eg

<div class="chat-sidebar">
    <div class="sidebar-name">
        <!-- Pass username and display name to register popup -->
        <a href="javascript:register_popup('Jodaine', 'Jodaine');">
            <img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/>
            <span>Jodaine</span>
        </a>
    </div>
</div> 

This works perfectly well but I would Like to populate the users dynamically. So when a user signs in.

I have this function which does the same thing through the script but when I call the function it goes on top of the div that is already there. so the names overlap.

    function populatesidebar() {
        ccc = ccc + 1;
        var element = '';
        element = element + '<div class="chat-sidebar">';

        element = element + '<div class="sidebar-name"><a href="javascript:register_popup(\'Jodaine2\', \'Jodaine2\');"><img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/><span>Jodaine'+ccc+'</span></a></div></div>';

        document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
    }

this function is called every three seconds using:

$(document).ready(function () {
    //let the code run every second
    setInterval(function() {
        populatesidebar();
    },3000); //1000 = 1 seconds
});

I have added:

document.getElementsByClassName("chat-sidebar").remove();

at the beginning of the populatesiderbar function but then nothing shows.

Answer 1

If I can assume the chat-sidebar element is in your initial HTML:

function populatesidebar() {
    ccc = ccc + 1;

    var sidebarNameHtml = '<div class="sidebar-name"><a href="javascript:register_popup(\'Jodaine2\', \'Jodaine2\');"><img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/><span>Jodaine'+ccc+'</span></a></div>';

    $('.chat-sidebar').html(sidebarNameHtml);

}

Here I'm using jQuery's html() method to set the content for chat-sidebar , overwriting any existing content. You have jQuery in place already so take advantage of it :)