Question

我正在尝试更新位于div（div1）中的聊天内容，但仅当div1的内容发生更改时（消息已提交到db并在div1中获取）。

我尝试了来自here的解决方案，但是我无法比较数据。

此解决方案完美无缺，但没有内容比较：

window.onload = startInterval;
function startInterval()
{
    setInterval("startTime();",2000);
}

function startTime()
{
    jQuery('#div1').load('index.php #div1 > *');
}

这是基于this的修改，但失败了：

window.onload = startInterval;
function startInterval()
{
    setInterval("startTime();",2000);
}

function startTime()
{
    var $main = $('#div1');
    $.get('chat.php #div1', function (data)
    {
        if ($main.html() !== data) $main.html(data);
    }); 
}

我尝试了对此代码的各种修改，但无济于事...... 我无法重新加载整个页面，如果没有必要，我不想这样做，因为如果你必须滚动消息，它会使聊天更难阅读。如何解决这个问题？

更新

根据@ T.J的建议，我修改了现在完美运行的代码：

window.onload = startInterval;
function startInterval()
{
    setInterval(startTime,3000);
    scrolDown();
}

function startTime()
{
    var $main = $('#div1');     
    $.get('#div1', function (data)
    {
        elements = $(data);
        thisHTML = elements.find("#div1").html();
        if ($main.html() !== thisHTML) {                
            $main.html(thisHTML);
            scrolDown();
        }           
    });     
}

另一个问题是获得所需的库：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

这显然不是我之前使用的负载所必需的。

Answer 1

您想使用get，但您想要load的片段功能，因此您必须自己完成这项工作。然后记住你上次得到的东西，只有在不相同时才更新：

var lastHTML;

function startTime()
{
    var $main = $('#div1');
    $.get('chat.php', function (data) // <== Or index.php, the question has both
    {
        var elements, html;

        // Turn the HTML into elements
        elements = $(data);

        // Get the HTML of *only* the contents of #div1
        html = elements.find("#div1").html();

        // If that has changed, use it
        if (lastHTML !== thisHTML) {
            lastHTML = thisHTML;
            $main.html(thisHTML);
        }
    }); 
}

请注意，这是片段功能的一个相当基本的实现（例如，它不像load那样去除脚本）。你可能想看看load如何处理它的碎片并复制它（开源的乐趣）。

jQuery，必要时更新内容

1 个答案: