Alter Views Ajax Functionality

One of the areas I have found to be least documented in regards to views module is its ajax functionality. In writing the views ajax fade module I had to figure out a method to alter the way in which the ajax request and response was made. Though it fairly it is undocumented, it is not too difficult to alter the way in which these requests are made. You basically only have to implement to code blocks in order to do it. Note, this post does not account for what you actually want to do in your ajax customization. But merely how you can implement one.Our scenario to today: you have already created a custom module called ‘mymodule’.

The first thing you need to do is in your custom module you will need to implement hook_views_ajax_data_alter(). Replace ‘mymodule’ and ‘customCommand’ in the following with the name of your module and the name of your custom ajax (will explain in next section).

/**
 * Implements hook_views_ajax_data_alter().
 *
 * @param array $commands
 *   An array of ajax commands
 * @param string $view
 *   The view which is requested.
 */
function hook_views_ajax_data_alter(&$commands, $view) {

  // Replace Views' method replaceWith with our custom command
  // to replace the content with a fade. See: views_ajax_fade.js.
      if ($command['method'] == 'replaceWith') {
        $command['command'] = ‘customCommand’;
        );
      }
    }
  }
}

Basically what this does is just tells views to use our customCommand instead of the default replaceWith. Views will still send all the data through to our custom command that we need to do ajaxy stuff, but in our own way with a custom command. Next, we need to actually add our custom javascript in a .js file that you include with your module. Of course, replacing ‘customCommand’ with the name of your given command.

/**
 * Attaches our custom command to Drupal.ajax.prototype.commands
 */
Drupal.ajax.prototype.commands.customCommand = function (ajax, response, status) {
// See what data we are working with
console.log(ajax);
console.log(response);

  // The parent selector of the content we're replacing
  var viewsDomId = ajax.selector;
  // The data being requested.
  var newContent  = response.data;

  // When an ajax call is made we fadeOut the 'old' content
  // and then replace it with the 'new' content with a fadeIn.
  $(viewsDomId).fadeTo(2000, 0, function(){
    $(this).replaceWith(function() {
      return $(newContent).hide().fadeTo(2000, 1);
    });
    // Attach our current command to the content that
    // has been loaded via Ajax.
    Drupal.attachBehaviors(this);
  });
};

In the above example we add our custom command to the Drupal.ajax.prototype.commands object. Then we perform our custom ajax operations on the data. I have included 2 console.log()’s in this example that should expose enough data to show what you have to work with. These of course should be removed in production code. One important thing to note here is the Drupal.attachBehaviors(this); line. This attaches our command to the data that we are pulling in via ajax. Without this, we could not perform our command and the data we load via ajax after its been loaded because it wasn’t part of the dom on the initial page load. In other words you could only fire your custom command once per page load in each instance without it.

For a working example of this type of implementation, please see the views ajax fade module.

Happy ajaxing!