[您好,我正在使用HTML和JavaScript构建基本的Tableau扩展,该扩展从用户处获取开始和结束日期,提交后,我在Tableau中的视图将过滤到该范围。
但是,每次单击表单中的提交时,日期都会不断重置为HTML代码中定义的默认值,并将其传递给我的JS代码进行处理。它不保留用户输入的内容,有人可以看看下面的代码,并建议我在这里缺少什么吗?
<html>
<head>
<title>My Extension</title>
<script src="/tableau.extensions.1.latest.js"></script>
</head>
<body>
<h1>Hello! This is a basic filter extension</h1>
<form>
<label for="sdate">Start Date:</label><br>
<input type="date" id="sdate" name="sdate" value="2015-01-01"><br>
<label for="ldate">End Date:</label><br>
<input type="date" id="ldate" name="ldate" value="2016-01-01"><br><br>
<button onclick="tableau.extensions.initializeAsync()">Submit</button>
<script>
tableau.extensions.initializeAsync().then(() => {
let fieldName = 'Order Date';
let dashboard = tableau.extensions.dashboardContent.dashboard;
let selectedWorksheet = dashboard.worksheets.find(w => w.name === 'Sale Map (2)');
updateFilterRange(selectedWorksheet, fieldName);
});
function updateFilterRange(worksheet, fieldName) {
let today=new Date();
var lastDate=new Date(document.getElementById("ldate").value);
var startDate=new Date(document.getElementById("sdate").value);
worksheet.applyRangeFilterAsync(fieldName, { min: startDate, max: lastDate});
}
</script>
</form>
</body>
</html>
您可以尝试这个。向该按钮添加一个ID并添加一个事件监听器,以防止处理表单提交的默认方式]
<button id = "submit">Submit</button>
<!-- HTML Code -->
<script>
const button = document.getElementById("submit")
button.addEventListener("click", function(e) {
e.preventDefault()
// Your code for handling button click
}
</script>