I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable 'prev_selection' initialized as an empty array. The purpose of 'prev_selection' is to store the array of values in the multiple select div element before the user clicks the button. This allows me to track what selections have been added or removed before and after a click.
Upon clicking the button, it calls the function 'sendData()', which retrieves the selected data from the div element, then performs operations using 'prev_selection' to determine the newly selected values (initially, all values are considered newly selected).
The goal is to identify additions and deletions in the selected values between user clicks. To achieve this, I update 'prev_selection' with the 'selected_data' obtained from the div element immediately after the click.
However, there seems to be an issue related to asynchronous Ajax calls, making it challenging to find a satisfactory solution. Each time a click occurs, 'prev_selection' should ideally retain the value before the click. Unfortunately, when I try to print it using console.log() (as depicted in the code), it has already been updated to the latest selections even before reaching the success function where it should get updated.
Your insights and suggestions would be greatly appreciated. Feel free to ask for further clarification if needed.
<!-- multiple select/deselect div -->
<div id="someSelectionID"></div>
<button id="updateButtonID" onclick="sendData()">Click to send</button>
// initially, no data is selected
var prev_selection = [];
function sendData() {
// retrieve the selected data from the div element "someSelectionID"
let selected_data = $('#someSelectionID').val();
// perform some operations on the selected data
// which involves utilizing prev_selection
// logging prev_selection reveals it's already updated with the latest click
console.log(prev_selection );
$.ajax({
type: "POST",
url: "<some url>",
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify( < some data > ),
success: function(result) {
console.log(result);
/* upon successful completion of the request, update the
previous selection to match the current selected data */
prev_selection = selected_data;
}
});
}