当前位置: 代码迷 >> JavaScript >> 在JavaScript跨度加载之后,innerHTML会读取跨度标签
  详细解决方案

在JavaScript跨度加载之后,innerHTML会读取跨度标签

热度:87   发布时间:2023-06-03 18:13:00.0

背景:

我在后端使用Django; 在我的模板中,我使用的是html,jinja2和javascript(已加载jQuery)。

目标:

我希望javascript每隔一秒钟检查一次(或如此),以查看页面的某一部分是否有更新,如果有,请更新另一部分。

相关HTML

<p>Last action taken: <span id="actionTime">{{ last_action_time.isoformat }}</span></p>

从视图中传入last_action_time,作为上一次在数据库中更新“ action_log”的时间。 据我所知,它工作正常。

相关的javascript:

$(function () {
    function refresh_action_log(){
        var url_actions = document.URL + ' #action_log'
        $('#action_log').load(url_actions);
    }
    function update_action_time() {
        var url_action_time = document.URL + ' #actionTime';
        $('#actionTime').load(url_action_time, function () {
            // When it loads, schedule the next request for 1s later
            setTimeout(update_action_time, 1000)
        });
        var pageUpdate = new Date(document.getElementById('updateTime').innerHTML);
        var actionUpdate = new Date(document.getElementById('actionTime').innerHTML);
        var now = new Date();
        console.log(actionUpdate.toLocaleString());  // This shows the problem
        console.log(pageUpdate.toLocaleString());
        if (actionUpdate > pageUpdate) {
            refresh_action_log();
            document.getElementById('updateTime').innerHTML = now.toLocaleString();
        };
    };
    update_action_time();
})

两条console.log行用于调试,但这向我展示了我不了解的内容。 首次加载页面时,两个日期都会打印到控制台。 但是,在间隔之后,无论日期是否更改,console.log(actionUpdate ...)都会输出“无效日期”。 据我所知,actionTime的重载不会更改任何格式,等等。如果action_log中的上一个操作的日期没有变化,那么last_action_time的显示对我来说似乎没有什么不同。 如果action_log中有更改,last_action_time将在html中更新。 这一切似乎与var actionUpdate没有什么不同; 第一次加载时,它会打印到控制台。 此后每次都显示为“无效日期”。 这也意味着if语句永远不会运行。

题:

为什么重新加载页面的一部分会导致javascript Date() innerHTML 无法读取页面那部分的span标记,即使该部分的其他内容似乎都一样?

在这里找到问题:

var actionUpdate = new Date(document.getElementById('actionTime').innerHTML);

由于某些原因,我仍然不明白,在初始页面加载后,重新加载span便触发了.innerHTML来读取span标签和文本。

解

var actionUpdate = new Date($("#actionTime").text());
  相关解决方案