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

Question

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

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:

这是我的模块代码:

<?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 命令。 .

Answer 1

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

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

就是这样。希望有人会发现这很有用。