When users click on a button (with `id` graph), I'd like to fill the default Drupal content div (<div class="content">) with a graphael instance.

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

    });

The PHP:

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

which leads to the page callback: (I'm concerned with the `if` code block)

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

    }

and finally the function called within the callback function:

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

    } 

**THE PROBLEM:** returning a theme doesn't really send anything back to the AJAX request (unlike `print` statements). I tried to print the theme, but that produces a white screen of death. How would I generate the graph without printing something?

Comments

nevets’s picture

How about like this

function _process_publications($venue) {
var $output;

    if( isset($_POST['format']) && $_POST['format'] == "graph" ){
       $output =  _make_bar_chart($venue);
    }
    elseif( isset($_POST['format']) && $_POST['format'] == "list" ) {
       $output =  _make_list($venue);
    }
    else{
        $output = "<p>blah</p>";
    }
print drupal_json_output($output);
    }
doc2012’s picture

Thanks for the reply, but unfortunately it's still not working.

The AJAX request completes successfully, but in Firebug, I get the response:

"\u003Cdiv id=\u0022graphael-graph-1\u0022 class=\u0022graphael-graph\u0022 style=\u0022height:600px; width:650px;\u0022\u003E\u003C\/div\u003E\n"

Obviously, this doesn't produce any HTML that can be inserted into the main content. I also tried to print $output without the `drupal_json_output`, but that produces an empty div:
<div id="graphael-graph-1" class="graphael-graph" style="height:600px; width:650px;"></div>

The actual graph isn't showing up...

nevets’s picture

If you install the developer examples module, enable the ajax examples, the "Ajax Link ("use-ajax" class)" demonstrates what you want to do

doc2012’s picture

Thanks for the reference to the example AJAX module! After minor tweaks, my AJAX is now working as it should.