2

ユーザーがボタン (グラフ付き) をクリックすると、デフォルトの Drupal コンテンツ( ) をグラファエル インスタンスで id埋めたいと思います。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>");
}

}

問題:printテーマを返すことは、(ステートメントとは異なり) AJAX 要求に実際には何も送り返しません。テーマを印刷しようとしましたが、死の白い画面が表示されます。何かを印刷せずにグラフを生成するにはどうすればよいですか?

4

1 に答える 1

1

役立つヒントを提供してくれた Drupal フォーラムのnevetsに感謝します: http://drupal.org/node/1664798#comment-6177944

Drupal で AJAX を使用する場合は、実際に 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 に答える