Как отправить ajax drupal форму, используя javascript

Question

Во -первых, я попробовал там решение Amar Ravikumar, но оно все еще не работает.

У меня есть этот кусок кода:

$form['button'] = array(
  '#type' => "button",
  '#id' => "mymoduleAjaxButton",
  '#value' => t("Process"),
  '#ajax' => array(
    'callback' => "mymodule_form_callback",
    'wrapper' => "message",
    'method' => "html",
  ),
);

И у меня есть холст, который содержит много графических материалов, на которые я могу нажать.

Когда я нажимаю на определенный элемент, я хочу, чтобы моя форма ajax отправлялась (например, если я нажал кнопку).

Вот код js:

// circle is a Kinetic.Circle object. 
circle.on("click touchcancel tap", function() {
  var fill = onClick(posX, posY);
  this.setFill(fill);
  layer.draw();
});
function onClick(x, y) {
  // Some stuff
  jQuery("#mymoduleAjaxButton").trigger("mousedown");
  return "red";
}

Как видите, я следую советам Амара (см. Первую строку), но я не работаю. Цвет моего круга меняется, но форма не отправлена.

Другие решения, которые я пробовал:

jQuery("#mymoduleAjaxButton").trigger("click"); // Like mousedown
jQuery("#mymoduleAjaxForm").submit(); // It refreshes my page... Not what i want, otherwise i wouldn't use ajax
jQuery(document).ready(function() { jQuery("#mymoduleAjaxButton").trigger("click"); });
 /* Replace the click by mousedown doesn't change anything too, 
moreover i believe it's useless here to add this here... */

Кто-нибудь знает, как я могу это сделать или знаю, что я делаю неправильно? Благодарю.

Answer 1

У меня тоже были проблемы с этим, что сработало для меня:

$('#my-form').trigger('submit');

Таким образом, вместо запуска события нажатия кнопки вы запускаете событие отправки формы.

Я читал, что вы больше не работаете над этим, но я решил поделиться с теми, кто сталкивался с этой темой во время поиска той же проблемы.

Answer 2

Вместо вызова отправки (которая перезагрузит всю страницу), запустите действие щелчка на кнопке отправки.

Обратите внимание, что из-за AJAX идентификаторы элементов формы заменяются. Поэтому мне пришлось использовать data-drupal-selector в моем jQuery, чтобы JavaScript работал несколько раз. Смотрите мой код ниже:

Drupal.behaviors.myCustomModule = {
    attach: function (context, settings) {
        $('select[data-drupal-selector="edit-YOUR-FIELD"]', context).change(function(){
            $('#views-exposed-form-YOUR-VIEW-block-1 input.form-submit').trigger('click');
        });
    }
};

Answer 3

Пример для выставленных фильтров d8:

/*
*   @file
*
*
* */

(function ($, Drupal, drupalSettings) { // closure
  'use strict';
  Drupal.behaviors.videos = {
    attach: function (context) {

      $('main', context).ready(init);

      function init() {

        SelectToUlFilter();

        $('ul').on('click', '.selectlist-option', function () {
          //stockage du filtre selectionné
          var selected_filter = $(this).attr('data-value');
          localStorage.setItem('data-value', selected_filter);

          var $selectlist = $(this).closest('.selectlist');
          $selectlist.find('.selectlist-option').removeClass('active');
          $(this).addClass('active');
          $($selectlist.data('select')).val($(this).data('value'));
          $('.views-exposed-form input.form-submit').trigger('click');
          SelectToUlFilter();
        })

      }

      /**
       * convertit select/option to ul/li
       * affranchit de l'usage du submit bouton
       * memoire des clicks
       */
      function SelectToUlFilter() {

        $(".views-exposed-form .form-select").once().each(function () {
          $(this).hide();
          $(".views-exposed-form").find("input[type='submit']").addClass("visually-hidden");

          var $ul = $("<ul/>", {
            'class': 'selectlist'
          });
          $ul.data('select', $(this));
          $(this).find('option').each(function () {
            var $li = $("<li/>", {
              'class': 'selectlist-option',
              'data-value': $(this).val(),
              'text': $(this).text(),
              'selected': 'selected'
            });
            $ul.append($li);
          });
          $(this).after($ul);

          //affichage du filtre selectionné
          if (localStorage.getItem("data-value") === null) {
            localStorage.setItem('data-value', 'All');
          }
          var selected_filter = localStorage.getItem('data-value');
          $("li[data-value=" + selected_filter + "]").attr('selected', "selected");


        });
      }
    }
  };
}(jQuery, Drupal, drupalSettings));