How to make a custom Ajax command wait for animation in Drupal 7

Question

I am trying to construct a custom Ajax command for use on a Drupal 7 view. The view is showing thmubnails in a grid. Clicking one a thumbnail should slide down a div in the next row with the full node content. Clicking on another thumbnail slides the other node up BEFORE the new request is handled. Because I couldn't find a way to manipulate the standard ajax commands enough to prevent the div being replaced by Ajax before the animation was done, I am trying to build a custom Ajax command that would control the flow. Now I get an anonymous Ajax error every time I click a thumbnail, no matter what I do.

An AJAX HTTP error occurred. HTTP Result Code: 500 Debugging information follows. Path: [xxxxxxx].localhost/ajax-reader/ajax/169/modal StatusText: Internal Server Error ResponseText:

This is my module's code with :

<?php

function ajax_reader_init() {
  drupal_add_js('misc/jquery.form.js');
  drupal_add_library('system', 'drupal.ajax');
}

/**
 * Implements hook_menu().
 */
function ajax_reader_menu() {
  // Menu callback for using ajax outside of the Form API
  $items['ajax-reader'] = array(
    'page callback' => 'ajax_link_response',
    'access callback' => 'user_access',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

/**
 * Register a custom jquery ajax command.
 */
function ajax_reader_command_replace_work($item) {
  return array(
    'command' => 'replaceWork',
    'cont' => $item
  );
}

/**
 * Callback function.
 */
function ajax_link_response($type = 'ajax', $nid = 0) {
  $output = _ajax_reader_load_noder($nid);
  if ($type == 'ajax') {
    $commands = array();
    // Feeding the themed node to my custom ajax command
    $commands[] = ajax_command_replace_work($output);
    $page = array(
      '#type' => 'ajax',
      '#commands' => $commands
    );
    ajax_deliver($page);
  }
  elseif ($nid > 0) {
    drupal_goto('node/' . $nid);
  }
  else {
    $output = '<div id="content">' . $output . '</div>';
    return $output;
  }
}

/**
 * Helper function for returning a themed node
 */
function _ajax_reader_load_noder($nid = 0) {
  $node = node_load($nid, NULL, false);
  if ($node) {
    $vnode = node_view($node, $view_mode = 'modal');
    return theme("node", $vnode);
  }
}

And this is my Javascript with my custom Ajax command

(function($, Drupal) {
/**
 * Register a custom jquery ajax command.
 */
  Drupal.ajax.prototype.commands.replaceWork = function(ajax, response, status) {
    // Checking if there is a div present to hide
    if ( $('#detail-view').length) {
        // Using promise() to make sure the slide animation is finished before replacing my content.
            $('#detail-view').slideUp('slow').promise().done(function() {
                $('#detail-view').replaceWith('<div id="detail-view">' + response.cont + '</div>');
                $('#detail-view').slideDown('fast');
          });
      // No #detail-view present to hide.
        } else {
            $(".view-portfolio .add-row").parents('tr').next().find('th').append('<div id="detail-view"></div>');
            $('#detail-view').replaceWith('<div id="detail-view">' + response.cont + '</div>');
            $('#detail-view').slideDown('fast');
        }
  }

})(jQuery, Drupal);

I have based my initial module on an excellent tutorial by Sean Buscay on basic Ajax in Drupal https://github.com/seanbuscay/drupal-ajax-demo and tried to mix in my own Ajax command using information I got from this video on Drupal's Javascript framework https://www.youtube.com/watch?v=smrhbSm0Wh0.

bparticle bparticle · Accepted Answer · 2015-11-10T18:06:05

The code in my question works and is in fact a solution to a problem I didn't have

For reference and for anyone who is interested in these kind of problems, I want to answer my own question even though it will expose me as a very silly programmer indeed :) The code above WORKS FLAWLESSLY, but has a naming problem on the PHP side: the function name that refers to the custom ajax command is ajax_reader_command_replace_work() and not ajax_command_replace_work().

That's it. Hope someone will find this useful.

How to make a custom Ajax command wait for animation in Drupal 7

1 Answers