I have a form with a button:

$form['categories_update'] = array(
  '#type' => 'button',
  '#value' => t('Load category-related properties'),
  '#ajax' => array(
    'callback' => '_mymodule_categories_callback',
    'wrapper' => 'categories_properties',
    'method' => 'replace',
    'effect' => 'fade',
    'prevent' => 'submit',
  '#limit_validation_errors' => array(),

Now, in Behavior I'm using:

(function($) { 
  var initialised = false;

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

      // Unrelated code

      $('#edit-categories-update', context).on('click', function(){
        console.log('Load category-related prperties clicked');

And it simply fails to work - no errors in console, but no code executed either.

It works all right when I comment out '#ajax' part of a button's definition. Is there a way to have both behavior JS and Form API Ajax working for one button?

I'm using jQuery update module in it's dev version, and I have it set to jQuery 1.8. The button is not inside the wrapper, so it's ID is not affected by AJAX call (verified in browser).

  • It was easy to find how to make one of the 2 work, a lot of advices, but nothing how to make them work together :/ – Mołot Nov 6 '13 at 14:43
  • @Beebee Question updated - yes, I have checked these. Sorry for missing it in my post. – Mołot Nov 6 '13 at 15:51
  • What were you thinking of doing within the custom click handler? Is it something that can be achieved using one of the ajax commands? – Beebee Nov 6 '13 at 15:57
  • @Beebee I wanted to reset global JS variable initialised to FALSE and re-run my own initialisation function just the way it was executed on the page load. I never get used to using ajax commands. – Mołot Nov 6 '13 at 16:02
  • 1
    @Beebee actually yes, putting $('#edit-categories-update').ajaxSuccess(function() { in place of ` $('#edit-categories-update', context).on('click', function(){` did it. That's the answer, it seems. – Mołot Nov 6 '13 at 16:20

I've done this by creating a function in the js file and then calling the function using the Drupal ajax_command_invoke() function.

For example, in the js put this:

$.fn.yourmodule_somename = function() {
  console.log('Load category-related prperties clicked');

And then in the AJAX callback, put this to call that function:

$commands[] = ajax_command_invoke(NULL, 'yourmodule_somename');

Form API #ajax effectively disables behaviors on elements. I can't see this documented, but that's how it works, consistently. So the solution was to change the line:

$('#edit-categories-update', context).on('click', function(){

and make it

$('#edit-categories-update').ajaxSuccess(function() {

That way code was not executed on click, but after processing of AJAX triggered by the button succeeded. It's not useful if you want to perform JavaScript before AJAX call, but if you need it to happen after, or if you don't care, it is a sufficient solution. If you need things to happen before AJAX call, use this instead:

$('#edit-categories-update').ajaxStart(function() {

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.