Как добавить файл javascript в пользовательскую форму и передать данные в файл js

Question

Я работаю с Drupal 8, и у меня есть пользовательская форма ajax, она отлично работает, когда я тестирую ее с помощью [Ajax htmlCommands]. но теперь я хочу отправить данные в файл javascript, чтобы показать их в div и сделать некоторые другие вещи. я создал js файл в themes/custom/myform/assets/js/simple-form.js, но при щелчке элемента в консоли ничего не отображается.

Drupal.behaviors.simple_form = function(context) {
$('.btn-primary').click(function() {
console.log('clicked');
  });
};

и добавьте его в themes/custom/myform/myform.libraries.yml

simple-form-js:
  js:
    assets/js/simple-form.js: {}

my модули пользовательской формы / custom / my_module / src / Form / SimpleForm. php

<?php
namespace Drupal\my_module\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
/**
 * Our simple form class.
 */
class SimpleForm extends FormBase {
  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'my_module';
  }
  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
//$form = parent::buildForm($form,  $form_state);
$form['#theme'] = 'simple_form';

   $form['massage'] = [
      '#type' => 'markup',
      '#markup' => '<div class="result_message"></div>',

    ];
   $form['number_1'] = [
      '#type' => 'textfield',
      '#title' => $this->t('number 1'),
      '#attributes' => ['class' => ['form-control ml-sm-2 w-100']],
      '#required' => TRUE,
    ];

    $form['number_2'] = [
      '#type' => 'textfield',
      '#title' => $this->t('number one'),
      '#attributes' => ['class' => ['form-control ml-sm-2 w-100']],
      '#required' => TRUE,

];




    $form['actions'] = [
      '#type' => 'button',
      '#value' => $this->t('Calculate'),
      '#attributes' => ['onclick'=>'return false;','class' => ['mt-3 btn btn-primary btn-me2']],
      '#attached' =>  [
         'library'=>[
         'simple-form',
       ]
      ],
      '#ajax' => [
        'callback' => '::setMessage',
      ]
    ];


return $form;
  }
public function setMessage(array &$form, FormStateInterface $form_state) {
$response = new AjaxResponse();
$letter = $form_state->getValue('number_1');
$code = $form_state->getValue('number_2');
$fetchUrl = 'http://example.com/api';
$responseAPI = \Drupal::httpClient()->get($fetchUrl, array('headers' => array('Accept' => 'text/plain')));
$data = (string) $responseAPI->getBody();
//drupal_set_message($data);
    $response->addCommand(
      new HtmlCommand(
        '.result_message',
        '<div class="my_top_message">' . $this->t('The result is @result', ['@result' => ($data)])
        )
    );
    return $response;

}
public function validateForm(array &$form, FormStateInterface $form_state) {
}
  /**
   * {@inheritdoc}
   */
public function submitForm(array &$form, FormStateInterface $form_state) {
}


}

и themes/custom/myform/myform.theme

        if($route_namee=="my_module.simple_form"){
                $variables['#attached']['library'][] = 'myform/simple-form-css';
                $variables['#attached']['library'][] = 'myform/simple-form-js';
        }

Answer 1

То, что вы ищете, это ajaxCommand, а не поведение. Создайте пользовательскую ajaxCommand и передайте ей переменные при создании ответа ajax.

Вот справка https://weknowinc.com/blog/creating-custom-ajax-command-drupal-8 И вдохновитесь тем, как работает Drupal Cores InvokeCommand

Answer 2

Чтобы присоединить библиотеку, вам не нужны файлы тем или модулей, например:

$form['#attached']['library'][] = 'core/drupal.dialog.ajax';

достаточно, чтобы присоединить библиотеку, в вашем случае вам следует назвать ваш файл js как:

$form['#attached']['library'][] = 'simple-form-js';

Тогда файлы из вашей библиотеки будут загружены вместе с вашей формой.

Answer 3

Вы можете использовать HOOK_form_alter для подключения библиотек

*/**
* Implements hook_form_alter().
*/

function my_module_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if($form_id == "my_module") {
    $form['#attached']['library'][] = 'myform/simple-form-js';
    $form['#attached']['library'][] = 'myform/simple-form-css';
    $form['#attached']['drupalSettings']['my_module']['variable'] = 'Your Custom values to JS';
    return $form;
  }
}