How to execute custom javascript code after an ajax succes (using the Drupal Ajax framework) ?

I was able to accomplish what I needed with ajax_command_invoke.
http://api.drupal.org/api/drupal/includes--ajax.inc/function/ajax_comman...

Just wanted to add a quick note here that this solution worked great for me. Thanks for posting your code!

For my use, I wanted to call a custom javascript command and then do the normal behavior of inserting a rebuilt form element into ajax['#wrapper']. I did this using something similar to the following code in my callback function:

  $commands[] = ajax_command_invoke(NULL, 'myJavascriptFunction', array($foo));
  $html = drupal_render($form['bar']);
  $commands[] = ajax_command_insert(NULL, $html);

  return array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );

If anyone has any feedback on this approach, it would be great to hear.

As an alternative, you can insert a script tag into the document.

$commands[] = ajax_command_append('body', '<script>alert("foo");</script>');

YMMV. I wanted to do it this way because I couldn't rely on my jQuery function definition being loaded after the function that I needed to call. Just thought I'd toss this out there for anyone else looking for another way.

Great answer, thanks for posting...

For me, .ajaxcomplete fired even when my form validation wasn't successful. The best way around this was to write a custom ajax plugin.

I included something like this in my active .js file:

$(function () {
  if (!Drupal.Ajax) return;
  Drupal.Ajax.plugins.yourAction = function (hook, args) {
    if (hook == 'message' && args.data.form_id == 'your_form' && args.data.status == true) {
      // args.data.status is true only after validation clears
      // Your js here
    }
  };
});

You can get a good look at the structure of your args with console.log(), then drill down so your code only executes exactly when you need it to. The ajax plugins are called in ajax.js, if you want to take a look.

It will work, but actually I've since written a tutorial on how to do it in D7 now using ajax commands (which is the way to do it in D7). Calling a function after an #AJAX event (Drupal 7)

(function($) {

  Drupal.testAjax = {
    // Our form
    form_id: Your-Form-ID'  //Yes, I tested on my extended node creation form
  };

  Drupal.behaviors.testAjax = {
      
    attach: function(context, settings) {
      // We extend Drupal.ajax objects for all AJAX elements in our form 
      for (ajax_el in settings.ajax) {
        if (typeof Drupal.ajax[ajax_el] != 'undefined' && Drupal.ajax[ajax_el].element.form) {
          if (Drupal.ajax[ajax_el].element.form.id === Drupal.testAjax.form_id) {
            Drupal.ajax[ajax_el].beforeSend = Drupal.testAjax.beforeSend;
            Drupal.ajax[ajax_el].success = Drupal.testAjax.success;
            Drupal.ajax[ajax_el].error = Drupal.testAjax.error;
          }
        }
      }
    }   
  };

  // Disable form
  Drupal.testAjax.beforeSend = function (first, second) {
     console.log("Before Submit");
    // Call Drupal parent method 
    Drupal.ajax.prototype.beforeSend.call(this, first, second);
  }



  Drupal.testAjax.success = function (response, status) {
      console.log("On Success");
    // Call original method with main functionality
    Drupal.ajax.prototype.success.call(this, response, status);
  }
  Drupal.testAjax.error = function (response, uri) {
            console.log("Error");

    Drupal.testAjax.enableForm(this.element.form);
    
    // Call original method with main functionality
    Drupal.ajax.prototype.error.call(this, response, uri);
  }

})(jQuery);

It's an easy solution, but note that the code will be executed after every single AJAX request on the site - which can potentially cause a lot of overhead.