以设定的间隔刷新DIV元素

时间:2018-05-29 14:11:05

标签: javascript jquery html django

对于Django项目中的聊天应用程序,我填充了一个侧栏,其中包含已登录用户的链接。 链接打开一个弹出窗口进行聊天(类似于FB stlye)。如果我刷新页面,任何打开的弹出窗口都会关闭。我想只刷新侧边栏以反映用户是否已注销。此代码刷新整个页面,所有打开的弹出窗口都关闭。

$(function(){
    $('#sidebar-name').on('scroll', function(){
        scrolling = true;
    });
    setTimeout(function() { location.reload() },3500);

});

我使用下面的代码来获取消息并刷新消息框

function getMessages(){
    if (!scrolling) {
        $.get('/chatpop/messages/', function(messages){
            console.log(messages);
            $('#msg-list').html(messages);
            var chatlist = document.getElementById('msg-list-div');
            chatlist.scrollTop = chatlist.scrollHeight;
        });
    }
    var scrolling = false;
}

$(function(){
    $('#msg-list-div').on('scroll', function(){
        scrolling = true;
    });
    refreshTimer = setInterval(getMessages, 10000);
});

我也试过以下但没有工作..

$(function(){
    $('#sidebar-name').on('scroll', function(){
        scrolling = true;
    });
    (function() { load(location.href +'#sidebar-name') },10000);

});

我需要以不关闭已打开的聊天弹出窗口的方式刷新侧边栏。

正在使用的HTML是..

 <div class="chat-sidebar">
        <div class="sidebar-name">
            <!-- Pass username and display name to register popup -->
            {% for user in request.online_now %}
                {% if request.user != user %}
            <a href="javascript:register_popup('{{ user }}', '{{ user }}');">
            {% for img in users %}
                {% if img == user %}
        {% thumbnail img.profile.photo "30x30" crop="100%" as im %}
         <img src="{{ im.url }}" class="user-detail">
            {% endthumbnail %}{% endif %}{% endfor %}
            <span>{{ user }}</span>
            </a>{% endif %}{% endfor %}

看了一些stackoverflow的答案。但他们似乎都在发生事件时处理重新加载。我只想在设定的时间间隔刷新。很多人......

1 个答案:

答案 0 :(得分:1)

创建一个视图,以html格式返回在线用户并定期加载该网址。

setInterval(function() {
      $("#sidebar-name").load("{% url 'get_active_users' %}"); // you need to create get_active_users view
}, 5000);