Background Language used : typescript UI toolkit svelte and bootstrap
Description of Problem I am currently developing a vscode extension where clicking a button should update an HTML table element in the view based on the button clicked. Here is the typescript code that executes on each button click:
function updateOverview(op:string){
// Update overview table based on op
let table:HTMLTableElement = <HTMLTableElement> document.getElementById("overview");
let newRow=table.insertRow();
newRow.classList.add("row");
let insertCell=newRow.insertCell(0);
let updateCell=newRow.insertCell(1);
let deleteCell=newRow.insertCell(2);
if(op=="update"){
insertCell.innerHTML=" ";
updateCell.innerHTML="update;";
deleteCell.innerHTML=" ";
}
else if(op=="insert"){}
else {} //Any other operations are considered delete
}
Here is the HTML table that needs to be updated:
<table class="table table-dark" id="overview">
<thead>
<tr>
<th scope="col" colspan="3" align="center">Overview</th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="col">Insert</th>
<th scope="col">Update</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Button snippet:
<button on:click={()=>{updateOverview("update")}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>
The issue arises when I click the button, despite trying various solutions like using preventDefault event modifier and displaying a simple alert() on click.
Further Development based on brunnerh's suggestion
Added the following method to formdata holder class:
public addAffectectedTable(name:string,what:string,count:number):void {
// Logic here
}
A segment of my svelte template table now looks like this:
<tbody>
{#if formElements._tables}
{#each formElements._tables as table}
<tr>
// Table row structure
</tr>
{/each}
{/if}
</tbody>
The updated button snippet:
<button on:click={()=>{formElements.addAffectectedTable("test","update",3)}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>
Despite these changes, the issue still persists...
Update 02-09-2024 The problem also occurs when clicking buttons with no defined behavior. For example:
<span style="display: inline-block;"><button>Insert <i class="fa fa-plus" aria-hidden="true"></i></button></span>
Expected Outcome I expect the 'overview' table in my extension view to update successfully with each button click.
There might be some aspects of the vscode extension lifecycle and view rendering that I am not fully understanding... Could encapsulating the overview table as a nested viewPanel inside the main extension view help resolve the issue?
Any assistance or pointers would be highly appreciated :)
Thank you!