背景:
我在后端使用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标签其余部分似乎是相同的吗?
答案 0 :(得分:0)
在这里发现问题:
var actionUpdate = new Date(document.getElementById('actionTime').innerHTML);
由于我仍然不明白的原因,在初始页面加载之后,重新加载span便触发了.innerHTML来读取span标签以及文本。
解决方案
var actionUpdate = new Date($("#actionTime").text());