如何使用 javascript 提交 ajax drupal 表单

Question

首先，我尝试了 Amar Ravikumar 解决方案 there，但它仍然不起作用。

我有这段代码：

$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";
}

如您所见，我正在遵循 Amar 给出的建议（见第一行），但我没有工作。我的圈子颜色发生了变化，但表单没有提交。

我尝试过的其他解决方案：

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，表单元素的 ID 会被替换。所以我不得不在我的 jQuery 中使用 data-drupal-selector，所以 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));