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');

因此，不是触发按钮的click事件，而是触发表单提交事件。

我知道你不再在这方面工作了，但我认为无论如何我会分享那些在搜索同一问题时遇到这个问题的人。

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));

如何使用javascript提交ajax drupal表单

3 个答案: