How to make sure that drupalSettings value gets updated on the JavaScript end?

Question

Have an ajax callback function within which the data gets generated dynamically based on the custom input from form fields.

//ajax callback submit
$form['action'] = [
'#type' => 'button',
'#value' => $this->t('Submit'),
'#ajax' => [
'callback' => '::getData',
'wrapper' => 'table-data',
'method' => 'replaceWith',
'effect' => 'fade', 
];

//ajax callback function
public function getData($form, FormStateInterface &$form_state) {
$table_data = $this->getTableData($form_state);  //getting the data dynamically
$form['section']['#attached']['drupalSettings']['table_data'] = $table_data; //assigning the data to drupalSettings
dpm($table_data); //to check if the assignment is updated
    return array($form['table_markup'],$form['section']);   //$form['table_markup'] is a markup used to display data in the table
   }

//javascript code
(function ($, Drupal, drupalSettings) { 
    Drupal.behaviors.display_data = {
    attach: function (context, settings) {
        alert(drupalSettings.table_data); 
        var table_data  = drupalSettings.table_data;  //inconsistency noticed in this assignment
    }
};

})(jQuery, Drupal, drupalSettings); 

Now whenever I click on the submit button, the $table_data gets updated and assigned to the drupalSettings dynamically, but passing its value to the javascript seems to be behaving inconsistent, meaning the drupalSettings.table_data within javascript does not get updated but shows the previous set values.

For it to work correctly I have to reload the page, change the form inputs and submit.

I've realized it may have to do with the cache and tried to avoid it by setting the routing.yml file as below:

  options:
    no_cache: 'TRUE'

Not sure how to use cache tags here, as I do not have any tags defined Tried to rebuild the form within the callback which didn't work either. The form input fields does not get cleared even after reloading the page and I'm confused why this happens even after the no_cache is set to true?

Tried using 'delete' on javascript end, which didn't work either

Is there a suitable approach to make sure that the variable from drupal php, received on the javascript is always an updated one?

Answer 1

In this case instead of returning HTML (aka the form render array) your AJAX callback method needs to return an AjaxResponse object (see API docs). The AjaxResponse object should contain at least 2 commands, one for updating your HTML (the processed form) and other to update the drupalSettings object. A possible response could be like

public static function ajaxCallback(array $form, FormStateInterface $form_state) {
  // Assuming the $form variable is either the updated render array or rendered output.
  $response = new AjaxResponse();
  $response->addCommand(new ReplaceCommand('#wrapper-id', $form));
  // The $data variable is an assoc array with he same keys you passed during the build under #attached key.
  // If you don't want to merge the settings but instead replace it, remove the second argument.
  $response->addCommand(new SettingsCommand ($data, TRUE));
  return $response;
}