2

With the page attachments function, I can easily attach a library or some variables to drupalSettings.

Now however, I want to replace some HTML code with ajax AND attach some variables to drupalSettings. While the ajax call does work in replacing HTML, it does not work in attaching or passing along the variables to drupal Settings.

Is there a way I can do both? Here is my code.

public static function AddAJAXResponseCommands(AjaxResponse $response = NULL, array $params = []) {

  $modalSettings = [
    'id' => 1,
    'status' => true,
  ];

  $sample = [
    '#type' => "html_tag",
    '#tag' => "div",
    '#attributes' => ['class' => ['context-menu']],
    '#value' => "Dashboard",
  ];

  $sample['#attached']['library'][] = 'mylibrary/dashboard-js';
  $sample['#attached']['drupalSettings']['dashboard']['myVariables'] = $modalSettings;

  $response->addCommand(new ReplaceCommand('.context-menu', $sample));
  return $response;
}

When I attempt to access drupalSettings.dashboard.myVariables which I confirmed already works when I use the page attachment function, it does not work when using ajax calls. Instead I get myVariables is undefined.

I console logged drupalSettings and sure enough, my variables are no where to be found in there. How can I get it added? Is page attachment the only way to do this?

4

Use the SettingsCommand

$settings=['ajax_forms_test' => ['foo' => 42]]; /* An array of key/value pairs of JavaScript settings. */
$merge=TRUE; /* (Optional) Booleen Whether the settings should be merged into the global drupalSettings. */
$response->addCommand(new SettingsCommand($settings,$merge));

So your code would become something like this:

public static function AddAJAXResponseCommands(AjaxResponse $response = NULL, array $params = []) {

  $modalSettings = [
    'id' => 1,
    'status' => true,
  ];

  $sample = [
    '#type' => "html_tag",
    '#tag' => "div",
    '#attributes' => ['class' => ['context-menu']],
    '#value' => "Dashboard",
  ];

  $sample['#attached']['library'][] = 'mylibrary/dashboard-js';
  $merge = TRUE;
  $settings['dashboard']['myVariables'] = $modalSettings;
  $response = new AjaxResponse();
  $response
    ->addCommand(new ReplaceCommand('.context-menu', $sample))
    ->addCommand(new SettingsCommand($settings, $merge));
  return $response;
}
4
  • I tried that, but it didn't submit my settings. So i'm confused on how to use it. – Shawn Oct 1 '20 at 22:16
  • Show code you tried? Edit your question's code. – No Sssweat Oct 1 '20 at 22:16
  • 2
    Ahhh of course it would prove me wrong the moment I test it again! X( thank you so much for your help. – Shawn Oct 1 '20 at 22:17
  • 1
    Yes, it seems like a general testing problem. Both approaches, question and this answer, should work. Attaching drupalSettings to a render array is the recommended approach, though. Drupal collects all attachments while rendering HTML for Ajax and runs exactly this code for you automatically if it finds drupalSettings. When building complex render arrays, containing for example rendered entities or forms, it's not possible to tell in advance if and where attachments will be added. – 4k4 Oct 2 '20 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.