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?
alert(drupalSettings.table_data);
shows up twice after clicking on ajax callback submit. So, before doing this:var table_data = drupalSettings.table_data;
I cleared the drupalSettings asdrupalSettings.table_data=[];
and that seems to do the trick. To answer your question, there's a high possibility that in future I may have to show large number of records in the table, So I'm inclined towards using this architecture rather than formAPI as I've noticed there are problems with pagination within in the ajax response area