You can try this. Add an id to that button and add an eventlistener to prevent the default way form submission is handled
<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>
Add the button type to your button type="button" or return false in the onclick.
<button type="button" onclick="tableau.extensions.initializeAsync()">Submit</button>
Or
<button onclick="tableau.extensions.initializeAsync(); return false">Submit</button>
By default button type is submit you have to change it to button like following
<button type="button">
If you have form element, when you click button, it will submitted and becoz you have not set form action url, it will just reload page, so your input elements will be setted as defult string.
so, you have to prevent form action.
If you have only one button on your page, you can do like this
$('button').onClick(function (e)){
// button actions here.
e.preventDefault();
}
Hi I’m in the process of building a basic tableau extension using HTML and JavaScript that takes start and end dates from the user, on submission of which my view in Tableau gets filtered to the range.
However, each time I click submit in the form the dates keep getting resetting to the default value defined in my HTML code and passes that to my JS code to process. It does not retain the user input, could someone have a look at the code below and advise on what I’m missing here?
<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>
You need to disable the default behaviour of your button to return false or preventDefault() as, as it stands it’s just submitting your page using the default behaviour of a button
Thanks for sharing this! This worked, further to enable the rest of the extension function to work, I just had to move the initializeAsync function within the button click Event listener.