skip to Main Content

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;

    }
  });
}

2

Answers


  1. Chosen as BEST ANSWER

    So it worked by changing this line

    prev_selection = selected_data;
    

    to:

    prev_selection = Array.from(selected_data);
    

    Because the prev_selection variable kept changing without me updating, it lead me to believe that it was some kind of reference to value instead of value itself. So just using Array.from to do a shallow copy actually worked.


  2. Try this

    $.ajax({
        type: "POST",
        url: "<some url>",
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify( < some data > ),
        }
      }).then(function(response){
        if (response.status === 200){
          console.log('succeed');
        } else {
          console.log('failed')
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search