AJAX回調在自定義Drupal塊中無響應

Question

我在我的Drupal網站上添加了PhantomJS Capture模塊 。 測試功能顯示了我的配置有效，並且可以從管理界面使用它。 現在，我想將其作為自定義塊放置在網站上，以便最終用戶可以粘貼網站鏈接並獲取其屏幕截圖。

我在模塊末尾實現了這段代碼，並且該表單顯示在網站上。

/**
* Implements hook_block_info().
*/

function phantomjs_capture_block_info() {
  $blocks = array();
  $blocks['Scraping Block'] = array(
    'info' => t('scraping block'),
  );
  return $blocks;
}

/**
* Implements hook_block_view().
*/

function phantomjs_capture_block_view($delta = '') {
  $block = array();
  switch ($delta) {
    case 'Scraping Block':
      $block['subject'] = 'Scraper';
      $block['content'] = phantomjs_capture_admin_form();
      break;
  }
  return $block;
}

但是，ajax回調不會在提交時觸發。 我該如何測試這個問題？ 還是我對這個模塊的理解有問題？

這就是我在phantomjs_capture.module中獲得的所有代碼，但我沒有更改任何其他文件。

<?php
/**
 * @file
 * Defines the administration interface and utility functions to use PhantomJS
 * and test screenshot capture functions.
 */


// @todo: hook_help.

/**
 * Implements hook_menu().
 */
function phantomjs_capture_menu() {
  $items = array();

  $items['admin/config/user-interface/phantomjs_capture'] = array(
    'title' => 'PhantomJS Screen capture',
    'description' => 'Screen capture with PhantomJS',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('phantomjs_capture_admin_form'),
    'access arguments' => array('adminster site'),
  );

  return $items;
}

/**
 * The administration form that allows site admins to enter information about
 * the systems installation of PhantomJS.
 *
 * @return array $form
 *  Drupal form array witht the administration form.
 */
function phantomjs_capture_admin_form() {
  $form = array();

  $form['phantomjs_settings'] = array(
    '#type' => 'fieldset',
    '#title' => t('PhantomJS settings'),
    '#collapsible' => FALSE,
  );

  $form['phantomjs_settings']['phantomjs_capture_binary'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => t('Path to phantomJS'),
    '#description' => t('This module requries that you install PhantomJS on your server and enter the path to the executable. The program is not include in the module due to linces and operation system constrains. See !url for information about download.', array(
      '!url' => l('PhantomJs.org', 'http://phantomjs.org/'),
    )),
    '#default_value' => variable_get('phantomjs_capture_binary', _phantomjs_capture_get_binray()),
  );

  $form['phantomjs_settings']['phantomjs_capture_dest'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => t('Default destination'),
    '#description' => t('The default destination for screenshots captures with PhantomJS'),
    '#default_value' => variable_get('phantomjs_capture_dest', 'phantomjs'),
  );

  $form['phantomjs_settings']['phantomjs_capture_script'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => t('PhantomJS capture script'),
    '#description' => t('The script used by PhantomJS to capture the screen. It captures full HD images (1920 x 1080).'),
    '#default_value' => variable_get('phantomjs_capture_script', drupal_get_path('module', 'phantomjs_capture') . '/js/phantomjs_capture.js'),
  );

  $form['phantomjs_capture_test'] = array(
    '#type' => 'fieldset',
    '#title' => t('Phantom JS test'),
    '#description' => t('You can use the form in this section to test your installation of PhantomJS.'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#tree' => TRUE,
  );

  $form['phantomjs_capture_test']['url'] = array(
    '#type' => 'textfield',
    '#title' => t('URL'),
    '#description' => t('Absolute URL to the homepage that should be capture (it has to be a complet URL with http://).'),
    '#default_value' => 'http://www.google.com',
  );

  $form['phantomjs_capture_test']['format'] = array(
    '#type' => 'select',
    '#title' => 'File format',
    '#options' => array(
      '.png' => 'png',
      '.jpg' => 'jpg',
      '.pdf' => 'pdf',
    ),
  );

  $form['phantomjs_capture_test']['result'] = array(
    '#prefix' => '<div id="phantomjs-capture-test-result">',
    '#suffix' => '</div>',
    '#markup' => '',
  );

  $form['phantomjs_capture_test']['button'] = array(
    '#type' => 'button',
    '#value' => t('Capture'),
    "#ajax" => array(
      "callback" => "phantomjs_capture_test_submit",
      "wrapper" => "phantomjs-capture-test-result",
      "method" => 'replace',
      "effect" => "fade"
    )
  );

  return $form;
}

/**
 * Ajax callback for the test PhantomJS form on the administration page.
 *
 * @param type $form
 * @param type $form_state
 * @return type
 */
function phantomjs_capture_test_submit($form, $form_state) {
  // Build urls and destionation.
  $url = $form_state['values']['phantomjs_capture_test']['url'];
  $file = 'test' . $form_state['values']['phantomjs_capture_test']['format'];
  $dest = file_default_scheme() . '://' . variable_get('phantomjs_capture_dest', 'phantomjs');

  // Get the screenshot and create success/error message.
  $output = '<div class="messages status"><ul><li>' . t('File have been generated. You can get it !url', array('!url' => l(t('here'), file_create_url($dest . '/' . $file)))) . '.</ul></li></div>';
  if (!phantomjs_capture_screen($url, $dest, $file)) {
    $output = '<div class="messages error"><ul><li>' . t('The address entered could not be retrieved.') . '</ul></li></div>';
  }

  // Return
  return array(
   'phantomjs_capture_test' => array(
     'result' => array(
       '#prefix' => '<div id="phantomjs-capture-test-result">',
       '#suffix' => '</div>',
       '#markup' => $output,
      ),
    ),
  );
}

/**
 * Validation of the administration form. It tests that the locations given
 * exists and that the PhantomJS binary is executable (by getting its version
 * number).
 *
 * @param type $form
 * @param type $form_state
 */
function phantomjs_capture_admin_form_validate(&$form, &$form_state) {
  // Check that phantomjs exists.
  if (!file_exists($form_state['values']['phantomjs_capture_binary'])) {
    form_set_error('phantomjs_capture_binary', t('PhantomJS was not found at the location given.'));
  }
  else {
    // Only show version message on "Save configuration" submit.
    if ($form_state['clicked_button']['#value'] == t('Save configuration')) {
      drupal_set_message(t('PhantomJS version @version found.', array(
        '@version' => _phantomjs_capture_get_version($form_state['values']['phantomjs_capture_binary']),
      )));
    }
  }

  // Check that destination can be created.
  $dest = file_default_scheme() . '://' . $form_state['values']['phantomjs_capture_dest'];
  if (!file_prepare_directory($dest, FILE_CREATE_DIRECTORY)) {
    form_set_error('phantomjs_capture_dest', t('The path was not writeable or could not be created.'));
  }

  // Check that capture script exists.
  if (!file_exists($form_state['values']['phantomjs_capture_script'])) {
    form_set_error('phantomjs_capture_script', t('PhantomJS script was not found at the location given.'));
  }

  // Remove test form.
  unset($form_state['values']['phantomjs_capture_test']);
}

/**
 * Returns the version number of the currently install PhantomJS.
 *
 * @param string $binary
 *  Optional absolute path with the PhantomJS binary. If not given the default
 *  location is used.
 * @return string|boolean
 *  If PhantomJS is found and executeable the version number is returned else
 *  FALSE is returned.
 */
function _phantomjs_capture_get_version($binary = NULL) {
  // If the binary is not given try the default path.
  if (is_null($binary)) {
    $binary = _phantomjs_capture_get_binray();
    if (!$binary) {
      drupal_set_message(t('PhantomJS binary was not found. Plase intall PhantomJS on the system.'));
      return FALSE;
    }
  }

  // Execute PhantomJS to get its version, if PhantomJS was found.
  $output = array();
  exec($binary . ' -v', $output);
  return $output[0];
}

/**
 * Returns the absolute path with the binray to the installed PhantomJS.
 *
 * @return string|boolean
 *  The executable PhantomJS binary or FALSE if not found.
 */
function _phantomjs_capture_get_binray() {
  $binary = variable_get('phantomjs_capture_binary', '/usr/local/bin/phantomjs');
  if (!file_exists($binary)) {
    return FALSE;
  }
  return $binary;
}

/**
 * Captures a screenshot using PhantomJS by calling the program.
 *
 * @param string $url
 *  The ULR/http(s) to render the screenshot from.
 * @param type $dest
 *  The destionation for the rendered file (e.g. public://fecthed_images).
 * @param type $filename
 *  The filename to store the file as in the destination.
 * @param type $element
 *  The id of the DOM element to render in the document.
 * @return boolean
 *  Returns TRUE if the screenshot was taken else FALSE on error.
 */
function phantomjs_capture_screen($url, $dest, $filename, $element = NULL) {
  // Get PhantomJS binary.
  $binary = _phantomjs_capture_get_binray();
  if (!$binary) {
    drupal_set_message(t('PhantomJS binary was not found. Plase intall PhantomJS on the system.'));
    return FALSE;
  }

  // Check that destination is writeable.
  if (!file_prepare_directory($dest, FILE_CREATE_DIRECTORY)) {
    drupal_set_message(t('The PhantomJS destination path (@dest) was not writeable or could not be created.', array(
      '@dest' => $dest,
    )));
    return FALSE;
  }

  // Get absolute path to PhantomJS script and the destionation file.
  $script = realpath(variable_get('phantomjs_capture_script', drupal_get_path('module', 'phantomjs_capture') . '/js/phantomjs_capture.js'));
  $dest = drupal_realpath($dest . '/' . $filename);

  // Run PhantomJS to create the screen shot.
  $output = array();
  if ($element) {
    exec($binary . ' ' . $script . ' ' . $url . ' ' . $dest . ' ' . escapeshellarg($element), $output);
  } else {
    exec($binary . ' ' . $script . ' ' . $url . ' ' . $dest, $output);
  }

  // Check that PhantomJS was able to load the page.
  if ($output[0] == '500') {
    return FALSE;
  }
  return TRUE;
}

/**
* Implements hook_block_info().
*/
function phantomjs_capture_block_info() {
  $blocks = array();
  $blocks['Scraping Block'] = array(
    'info' => t('scraping block'),
  );
  return $blocks;
}
/**
* Implements hook_block_view().
*/
function phantomjs_capture_block_view($delta = '') {
  $block = array();
  switch ($delta) {
    case 'Scraping Block':
      $block['subject'] = 'Scraper';
      $block['content'] = phantomjs_capture_admin_form();
      break;
  }
  return $block;
}

Answer 1

我在@zaporylie提供的其他網站上找到了解決方案。 問題不是AJAX，而是我解決問題的方法。 總之，他建議創建一個新的自定義模塊依賴於PhantomJS捕獲，然后申報塊。

這是AJAX的工作代碼：

phantomjs_capture_block.info

name = PhantomJS Capture Block
description = Adds block with simple form.
core = 7.x
package = Other
dependencies[] = phantomjs_capture

phantomjs_capture_block.module

<?php

/**
 * @file
 * Simple form placed in block.
 */

/**
 * Implements hook_block_info().
 */
function phantomjs_capture_block_block_info() {
  $blocks['screenshot'] = array(
    'info' => t('Screenshot'),
    'cache' => DRUPAL_NO_CACHE,
  );

  return $blocks;
}

/**
 * Implements hook_block_view().
 */
function phantomjs_capture_block_block_view($delta = '') {
  $block = array();
  if ($delta === 'screenshot') {
    $block['title'] = t('Screenshot');
    $block['content'] = drupal_get_form('phantomjs_capture_block_form');
  }
  return $block;
}

/**
 * Simple form.
 */
function phantomjs_capture_block_form($form, &$form_state) {
  $form['url'] = array(
    '#type' => 'textfield',
    '#title' => t('URL'),
    '#ajax' => array(
      'callback' => 'phantomjs_capture_block_form_callback',
      'wrapper' => 'phantomjs-capture-block-form-preview',
      'method' => 'replace',
    ),
  );

  $form['preview'] = array(
    '#type' => 'container',
    '#attributes' => array(
      'id' => 'phantomjs-capture-block-form-preview',
    ),
  );

  if (!empty($form_state['values']['url'])) {
    $directory = 'public://';
    $filename = REQUEST_TIME . '.png';
    if (phantomjs_capture_screen($form_state['values']['url'], $directory, $filename)) {
      $form['preview']['image'] = array(
        '#theme' => 'image',
        '#path' => $directory . '/' . $filename,
        '#width' => '100%',
      );
    }
    else {
      drupal_set_message(t('Unable to create screenshot'), 'error');
    }
  }

  return $form;
}

function phantomjs_capture_block_form_callback($form, $form_state) {
 return $form['preview'];
}