Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Server receives more than one time from Javascript callback
Hello,
I have a lazyloading table, then when i click on one row, i get a new customer javascript component with a saveButton.
Then i have a problem about the javascript callback during the button click:
var saveButton = document.querySelector('#saveRegion');
saveButton.addEventListener("click", function(e) {
if (saveRegions()) {
setTimeout(function() {
console.log('Debug the localstorage regions: '
+ localStorage.regions);
var o = {
record : []
};
o.record.push({
"recordId" : recordId
})
o.record.push({
"regions" : localStorage.regions
})
com.ihm.component.chart
.saveregion(o);
}, 3000);
}
dialog.dialog("close");
And server side:
JavaScript.getCurrent().addFunction(jsSaveRegion, new JavaScriptFunction()
{
private static final long serialVersionUID = 4119186268144783717L;
@Override
public void call(JsonArray arguments)
{
LOGGER.debug("call from client side");
}
});
The server received 2 or 3 times the same command when i click on the save button, can you tell me why?
It is related to the lazyloading or refresh?
Thank you very much
Maybe i find the reason, i create the customer javascript component when i click on the new row, and the old one is always there i think. So:
Select the first row --> click on the save button --> server receive 1request
Select the second row --> click on the save button --> server receive 2 requests
Select the third row --> click on the save button --> server receive 3 requests
Select the fourth row --> click on the save button --> server receive 4 requests
etc...
But, i have already done this in the customer js file, maybe it doesn't work, always the same problem:
var localStorageSpace = function() {
var allStrings = '';
for ( var key in window.localStorage) {
if (window.localStorage.hasOwnProperty(key)) {
allStrings += window.localStorage[key];
}
}
return allStrings ? 3 + ((allStrings.length * 16) / (8 * 1024)) + ' KB'
: 'Empty (0 KB)';
};
var storageIsFull = function() {
var size = localStorageSpace(); // old size
console.log('Debug Local storage');
console.log(size);
// try to add data
var er;
try {
window.localStorage.setItem("test-size", "1");
} catch (er) {
}
// check if data added
var isFull = (size === localStorageSpace());
window.localStorage.removeItem("test-size");
return isFull;
}
$(function() {
if (videoPlayer) {
console.log('Debug destroy the var videoPlayer');
if (storageIsFull())
console.log('Debug Storage full');
else
console.log('Debug storage not full');
// videoPlayer= null;
// localStorage.removeItem("regions");
localStorage.clear();
// window.videoPlayer.WebAudio.destroy();
// window.videoPlayer.backend.destroy();
// window.videoPlayer.Regions.clear();
// window.videoPlayer.destroy();
videoPlayer= null;
}
}());
com_ihm_component_videoPlayer= function() {
if (videoPlayer) {
console.log('Debug destroy the var videoPlayer');
if (storageIsFull())
console.log('Debug Storage full');
else
console.log('Debug storage not full');
videoPlayer= null;
console.log('Debug videoPlayer destory');
***
}
Here is the html content for the js component:
<div id="dialog-form" title="Modify Marks">
<form role="form" name="edit" style="opacity: 0; transition: opacity 300ms linear; margin: 0px 0px;">
<div class="form-group">
<label for="start">Start</label>
<input class="form-control" id="start" name="start" />
</div>
<div class="form-group">
<label for="end">End</label>
<input class="form-control" id="end" name="end" />
</div>
<div class="form-group">
<label for="note">Note</label>
<textarea id="note" class="form-control" rows="2" name="note" maxlength="64"></textarea>
</div>
<div id="saveRegion">
<button type="submit" class="btn btn-success btn-block">Save</button>
</div>
<center><i>or</i></center>
<div id="deleteRegion">
<button type="button" class="btn btn-danger btn-block" data-action="delete-region">Delete</button>
</div>
</form>
</div>
Should i remove this div for everytime when i click on the new table row?
And how? in the function "onStateChange"?