2

当用户点击一个按钮(带有id图表)时,我想用一个 graphael 实例 填充默认的 Drupal 内容div( )。<div class="content">

JavaScript:

jQuery(document).ready(function($) {

   $('#toggle #graph').click(function() {


    $.ajax({
      url: "http://www.mysite.com/?q=publications/callback",
      type: 'POST',
      data: {
        'format' : 'graph'
      },
      success: function(response) {
        $('div#content div.content').html(response);
      }
    });
  });
});

PHP:

$items['publications/callback'] = array(
  'type' => MENU_CALLBACK,  
  'title' => 'All Publications Callback',
  'page callback' => '_process_publications',
  'page arguments' => array(t('journal')),
  'access callback' => TRUE,
);

这导致页面回调:(我关心if代码块)

function _process_publications($venue) {

if( isset($_POST['format']) && $_POST['format'] == "graph" ){
    _make_bar_chart($venue);
}
elseif( isset($_POST['format']) && $_POST['format'] == "list" ) {
    _make_list($venue);
}
else{
    return("<p>blah</p>");
}

}

最后是回调函数中调用的函数:

function _make_bar_chart($venue) {

// get active database connection 
$mysql = Database::getConnection();

// if connection is successful, proceed
if($mysql){
       // do stuff


        $graphael = array(
            'method' => 'bar',
            'values' => $ycoordinates,

            'params' => array(
              'colors' => $colors,
              'font' => '10px Arial, sans-serif',
              'opts' => array(
                'gutter' => '20%',
                'type' => 'square',
              ),
              'label' => array(
                'values' => $xcoordinates,
                'isBottom' => true,
              ),
            ),

            'extend' => array(
              'label' => array(
                'values' => $ycoordinates,
                'params' => array('attrText' => array(
                  'fill' =>  '#aaa',
                  'font' => '10px Arial, sans-serif',
                )),
              ),
            ),
        );

    return theme('graphael', $graphael);

}

// else, connection was unsuccessful
else{
    print("<p>bad connection</p>");
}

} 

问题:返回主题并不会真正将任何内容发送回 AJAX 请求(与print语句不同)。我试图打印主题,但这会产生白屏死机。我如何在不打印东西的情况下生成图表?

4

1 回答 1

1

非常感谢Drupal 论坛上的nevets提供的有用提示:http ://drupal.org/node/1664798#comment-6177944

如果您想将 AJAX 与 Drupal 一起使用,您最好实际使用 Drupal 特定的 AJAX 相关函数。在我的主题page.tpl.php文件中,我添加了以下内容来创建调用 AJAX 的链接:

<?php
    // drupal_add_library is invoked automatically when a form element has the
    // '#ajax' property, but since we are not rendering a form here, we have to
    // do it ourselves.
    drupal_add_library('system', 'drupal.ajax');


        // The use-ajax class is special, so that the link will call without causing
        // a page reload. Note the /nojs portion of the path - if javascript is
        // enabled, this part will be stripped from the path before it is called.
        $link1 = l(t('Graph'), 'ajax_link_callback/graph/nojs/', array('attributes' => array('class' => array('use-ajax'))));
        $link2 = l(t('List'), 'ajax_link_callback/list/nojs/', array('attributes' => array('class' => array('use-ajax'))));
        $link3 = l(t('Create Alert'), 'ajax_link_callback/alert/nojs/', array('attributes' => array('class' => array('use-ajax'))));

        $output = "<span>$link1</span><span>$link2</span><span>$link3</span><div id='myDiv'></div>";
        print $output;

?>

当点击上述链接之一时,回调函数被调用(例如 ajax_link_callback/graph):

// A menu callback is required when using ajax outside of the Form API.
  $items['ajax_link_callback/graph'] = array(
   'page callback' => 'ajax_link_response_graph',
   'access callback' => 'user_access',
   'access arguments' => array('access content'),
   'type' => MENU_CALLBACK,
  );

.. 以及它所指的回调:

function ajax_link_response_graph($type = 'ajax') {
  if ($type == 'ajax') {
   $output = _make_bar_chart('journal');
   $commands = array();
   // See ajax_example_advanced.inc for more details on the available commands
   // and how to use them.
   $commands[] = ajax_command_html('div#content div.content', $output);
   $page = array('#type' => 'ajax', '#commands' => $commands);
   ajax_deliver($page);
  }
 else {
   $output = t("This is some content delivered via a page load.");
   return $output;
 }
}

这会将其中的任何 HTML 替换为从上面<div class="content">_make_bar_chart返回的图形图表。

于 2012-06-29T16:46:13.363 回答