Storing and updating a global value in the success function across multiple Ajax POST calls

I have two HTML elements: 1). the div element is a multiple select (it is a predefined widget that automatically creates the multiple select element) and 2). a button that triggers onclick event.
On the JS side, there is the global variable ‘prev_selection’ which is set to empty array for now. The idea of prev_selection is to remember the array of values in the multiple select div element before user clicks the button. I want to remember the value before and after a click to see what selections have been added/removed.

When the button is clicked, ‘sendData()’ is called. It gets the selected data from the div element. Then, it performs some operations using the prev_selection to know what the newly selected values are (in the beginning everything is newly selected in the div).

I want to find out the additions/deletions in the selected values between user clicks. For that, I update the prev_selection with ‘selected_data’ that I get from the div element jut after the click.

But this does not work as expected. There is something happening with the asynchronous Ajax call and I am not able to find a better solution for this. Everytime a click happens you had expect that ‘prev_selection’ remembers the value before the click but instead when I print it using console.log() (as shown in the code) it already gets updated to the latest selections even before reaching the success function (where it is supposed to get updated).

Thanks in advance! And please let me know if further explanation is required.

<!-- multiple select/deselect div -->
<div id="someSelectionID"></div>
<button id="updateButtonID" onclick="sendData()">Click to send</button>
// at first, no data is selected
var prev_selection = [];

function sendData() {
  // get the selected data from the div element "someSelectionID"
  let selected_data = $('#someSelectionID').val();

  // perform some operations on the selected data
  // this operation involves the use of prev_selection

  // printing prev_selection already has value of updated 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);

      /* once the request is successfully done update the 
      previous selection to what the current selected data is */
      prev_selection = selected_data;

    }
  });
}

96 thoughts on “Storing and updating a global value in the success function across multiple Ajax POST calls”

  1. 804116 636987Depending on yourself to make the decisions can actually be upsetting and frustrating. It takes years to build confidence. Frankly it takes much more than just happening to happen. 214321

    Reply
  2. i need a loan now direct lender, i need loan urgently in dubai. i need a loan low interest need loan i need a loan now i need a loan now with bad credit, 6 month cash advance loans, cash advance loans, cash advances, serve u cash payday loans. Financial affairs is typically viewed financial affairs, designed for companies.

    Reply

Leave a Comment