Ajax form add library on callback

Question

I'm having an AJAX form, which on submit fires a callback function where I want to attach my library.

Here's the submit button:

$form['actions']['submit'] = [
    '#type' => 'submit',
    '#value' => 'Submit',
    '#button_type' => 'primary',
    '#name' => 'calculate',
    '#submit' => ['::submitForm'],
    '#ajax' => [
      'callback' => [$this, 'submitFormCallback'],
      'wrapper' => 'my-form-id',
    ],
];

When the submitFormCallback is called I attach my library using AjaxResponse and its addAttachments like this:

$ajax_response->addAttachments([
  'library' => ['my_module/library_name']
]);

The problem is when the AJAX is completed the whole page's layout is destroyed. When I do NOT attach the library to AJAX response everything seems to work fine. (I've already tried to empty my JS files in my_module/library_name so the javascript won't affect any DOM elements, but the result is the same.

Is there any problem with the way I attach the library to AjaxResponse that may cause the broken layout?

Answer 1

Is there any problem with the way I attach the library to AjaxResponse that may cause the broken layout?

I guess so. This is how core does it when its an AJAX response, it attaches it to the form like this:

$form['#attached']['library'][] = 'my_module/library_name';
$ajax_response->setAttachments($form['#attached']);