By glcp on

Hello!

I would like to add an action when the user clicks on a Drupal AJAX button.

I tried this code without success:

Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
        jQuery('#edit-submit').bind('click', function() {
            alert('OK');
        });
    }
};

The alert is not shown when I click the button (but the AJAX action is done). The button looks like:

<input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit ajax-processed">

What am I doing wrong?
Thanks for your help.

⋅ Categories: Drupal 7.x

Comments

da_solver’s picture

da_solver commented

Hi,
Are you trying to invoke something on the server? Typically, that's what an AJAX control does (but I don't want to assume anything).

Is this a Drupal form (again, sorry don't want to assume anything)? Is this a Drupal form you wrote in a custom module, or, are you modifying an existing form?

Have you checked out the AJAX example in the "Examples for Developers"? http://api.drupal.org/api/examples/ajax_example!ajax_example.module/group/ajax_example/7 . You can compare your code with the examples.

Hope that helps :)
Good Luck

Jaypan’s picture

Jaypan commented

I think your problem may be that you are attaching one click listener to the button with your function, but then the click listener is getting overwritten by the Drupal AJAX click listener, meaning that yours does nothing.

huytp’s picture

huytp commented

You are right! The click behavior on submit button is overwritten by Drupal Ajax listenner ( It has been changed to mousedown behavior )

glcp’s picture

glcp commented

Thanks.
To solve my problem, I had to use the mousedown event instead of the click event and to print the javascript after any javascript code from Drupal (because it detaches any behaviors from the AJAX elements).

DrCord’s picture

DrCord commented

binding the exact same code to the mousedown event instead of the click or mouseup events worked.