2

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

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

8
  • 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
    Commented Nov 6, 2013 at 14:43
  • @Beebee Question updated - yes, I have checked these. Sorry for missing it in my post.
    – Mołot
    Commented Nov 6, 2013 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
    Commented Nov 6, 2013 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
    Commented Nov 6, 2013 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
    Commented Nov 6, 2013 at 16:20

2 Answers 2

0

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

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 and acknowledge you have read our privacy policy.

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