如何使自定义 Ajax 命令在 Drupal 7 中等待动画答案

【问题标题】：How to make a custom Ajax command wait for animation in Drupal 7如何使自定义 Ajax 命令在 Drupal 7 中等待动画
【发布时间】：2015-11-10 15:42:17
【问题描述】：

我正在尝试构建用于 Drupal 7 视图的自定义 Ajax 命令。该视图在网格中显示缩略图。单击一个缩略图应该会在下一行中向下滑动一个 div，其中包含完整的节点内容。在处理新请求之前，单击另一个缩略图会向上滑动另一个节点。因为我找不到足够的方法来操纵标准 ajax 命令以防止在动画完成之前 div 被 Ajax 替换，所以我正在尝试构建一个自定义的 Ajax 命令来控制流程。现在，无论我做什么，每次单击缩略图时都会出现匿名 Ajax 错误。

发生 AJAX HTTP 错误。 HTTP 结果代码：500 调试信息如下。小路： [xxxxxxx].localhost/ajax-reader/ajax/169/modal 状态文本：内部服务器错误响应文本：

这是我的模块代码：

<?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);
  }
}

这是我的 Javascript 和我的自定义 Ajax 命令

(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);

我的初始模块基于 Sean Buscay 关于 Drupal 中的基本 Ajax https://github.com/seanbuscay/drupal-ajax-demo 的优秀教程，并尝试使用从该视频中获得的有关 Drupal 的 Javascript 框架 https://www.youtube.com/watch?v=smrhbSm0Wh0 的信息混合我自己的 Ajax 命令。

【问题讨论】：

标签： jquery ajax drupal drupal-7

【解决方案1】：

我的问题中的代码有效，实际上是我没有遇到的问题的解决方案

作为参考和对此类问题感兴趣的任何人，我想回答我自己的问题，即使它确实会让我成为一个非常愚蠢的程序员:) 上面的代码可以正常工作，但是有一个命名问题PHP 方面：引用自定义 ajax 命令的函数名称是 ajax_reader_command_replace_work() 而不是 ajax_command_replace_work()。

就是这样。希望有人会觉得这很有用。

【讨论】：