25

I'm trying to programmatically (with jQuery) trigger a click on button with AJAX behavior in a Drupal form, but so far jQuery('#edit-submit').click() doesn't do anything.

A real mouse click on that button works as intended. Any ideas how to make it work?

  • If it is an #edit-submit button, can you not just do $('form').submit()? – cam8001 Sep 20 '11 at 13:54
  • that didn't work for me either. It either posts the form in a non-AJAX way or does nothing, depends on some settings in the form builder. – Daniel Sep 21 '11 at 8:06
40

jQuery('#edit-submit').mousedown() - apparently there's a big difference.

  • 3
    doesn't work for me – ram4nd May 4 '12 at 11:06
  • This solution worked for me. Clicking on the button executed the ajax call but .click() or variations didn't however .mousedown() works perfectly. – Eric Goodwin Jan 7 '13 at 16:27
  • I would avoid using the ID selector on form elements. If the form is rebuilt during the AJAX callback, the IDs of all elements will change, and your jQuery selector will no longer work. – Yuriy Babenko Jun 27 '13 at 21:02
  • Exactly what Eric said. I would like to know why there's difference... seriously, this seems not to make sense. – Johnathan Elmore Sep 22 '13 at 14:28
  • @JohnathanElmore mousedown() is just "the first part" of a click() event, which is complete when mouseup() occurs. When you click on a link and then you release the mouse outside the link's area, the click() doesn't usually get fired and the link is not followed. Probably an ajax call prevents the mouseup() to be fired, but this is just a guess... – pamatt Apr 15 '14 at 15:51
7

Actually, there's no need to guess.

You should use Drupal behaviors

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       // Your code goes here....

    }
}

This will give you access to the settings' ajax property,

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       console.log(settings.ajax);

    }
}

Depending on your configuration, you should see a list of triggering elements, with various properties such as the name of the callback function, the selector's id as well as the name of the triggering event.

You can then use the relevant information to trigger your event.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');
  • 2
    I like this answer because it offers an interesting technique to discover how to interface with generated elements for non-Drupal frontend developers that might be working on a Drupal project. +1 – Lester Peabody Nov 25 '15 at 16:32
6

Create ajax submit like the following.

 $form['button'] = array(
    '#type' => 'button',
    '#value' => 'Click',
    '#ajax' => array(
      'callback' => '_kf_reading_user_points',
      'wrapper' => 'reading-user-points',
      'method' => 'replace',
      'event' => 'click',
    ),
  );

function _kf_reading_user_points(&$form, &$form_state) {
  // Something within the callback function.
}

Then the jquery .click() event would be work in the drupal ajax form.

  • can you post the sample callback function too , when i tried ,its not going to callback function – Crazyrubixfan Aug 10 '16 at 12:20
  • 1
    Added the callback function :) – Leopathu Aug 10 '16 at 13:17
3

You can also use .trigger() jQuery method. $('#element').trigger('click');

3

In my case, the above recommended solutions didn't work for me, but the mention of .mousedown() led to the following idea that worked for me (Drupal 7):

$('#custom-submit-button').click(function() {
  $('#ajax-submit-button').trigger('mousedown');
});

There's some helpful background info about "why" this is the case in the Form API Reference under #ajax_prevent

  • I didn't need the click() wrapper, but that link to ajax prevent was the KEY! – Ryan Hartman Oct 22 at 15:48
2

Looking at the Better Exposed Filters module, they submit the AJAX form by finding $(.ctools-auto-submit-click') and trigging a click.

<?php
// ... near line 190 of better_exposed_filters.js

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>
  • the click event worked for me, whereas the mousedown event didn't. – aross Nov 17 '14 at 14:33
0

You have to trigger the submit event on the form. Click and mousedown events on buttons are not working.

  • That is what I tried at first, and it doesn't appear to be working correctly. Which is how I got here. – aross Nov 17 '14 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.