first of all, i've tried Amar Ravikumar solution there, but it still doesn't work.

I have this piece of code :

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

And i have a canvas which contains many graphicals stuffs on which i can click.

When i click on a particular element, i want my ajax form to submit (like if i pressed the button).

Here is the js code:

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

As you can see, i'm following the advices given by Amar (see the first line), but i doesn't work. My circle color changes, but the form isn't submitted.

Other solutions i've tried:

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... */

Does anyone know how i can perform that or know what i'm doing wrong? Thanks.

first of all, i've tried Amar Ravikumar solution there, but it still doesn't work.

I have this piece of code :

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

And i have a canvas which contains many graphicals stuffs on which i can click.

When i click on a particular element, i want my ajax form to submit (like if i pressed the button).

Here is the js code:

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

As you can see, i'm following the advices given by Amar (see the first line), but i doesn't work. My circle color changes, but the form isn't submitted.

Other solutions i've tried:

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... */

Does anyone know how i can perform that or know what i'm doing wrong? Thanks.

• javascript
• drupal-7
• drupal-forms
• drupal-ajax

• Did you get any javascript error? – Ankit Chauhan Commented Feb 21, 2013 at 11:51
• From what I can remember, no (I'm pretty sure that it was, obviously, the first thing I did check). By the way, I'm not working on it anymore, and I don't know if the person who took this project fixed it. – GeoffreyB Commented Feb 22, 2013 at 12:42

3 Answers 3

I had some trouble with this too, what worked for me was:

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

So instead of triggering the button's click event you trigger the forms submit event.

I read you are not working on this anymore but I thought I'd share anyway for the ones that e across this thread while searching for the same problem.

Instead of calling the submit (which will reload the entire page), trigger the click action on the submit button.

Note that because of the AJAX, the IDs of form elements get replaced. So I had to use the data-drupal-selector in my jQuery so the javascript worked multiple times. See my code below:

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

an example on d8 exposed filters :

/*
*   @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));