Drupal Flot With AJAX Callback?

By longphant on 22 Feb 2012 at 16:15 UTC

//Taken from flot_example.module
function getFlotGraphVars() {
	$d1 = new flotData(array(array(0, 1), array(4, 8), array(8, 5)));
	$d2 = new flotData(array(array(0, 8), array(3, 5), array(8, 0.5)));
	$variables = array(
		'data' => array($d1, $d2),
		'element' => array(
		'id' => 'flot-example-normal',
		'class' => 'flot-example',
		'style' => "width:600px;height:400px",
		),
	);
	return $variables;
}
//Same as above but just changing the points
function getNewFlotGraphVars() {
	$d1 = new flotData(array(array(10, 20), array(10, 50), array(10, 40)));
	$d2 = new flotData(array(array(9, 1), array(8, 7), array(8, 10)));
	$variables = array(
		'data' => array($d1, $d2),
		'element' => array(
		'id' => 'flot-example-normal',
		'class' => 'flot-example',
		'style' => "width:600px;height:400px",
		),
	);
	return $variables;
}

function button_callback() {
	return array(
		$form['flotGraph'],
	);
}

//Hook_form
function testing_form($form, $form_state) {
	$form['button'] = array(
		"#type" => "button",
		"#value" => t("Click me"),
		"#ajax" => array (
			"callback" => "button_callback",
			"wrapper" => 'button_wrapper',
			"keypress" => true,
		),
		);

	$form['flotGraph'] = array(
        '#prefix' => '<div id=button_wrapper>',
        '#markup' => theme_flot_graph(getFlotGraphVars()),
        '#suffix' => '</div>'
	);
	//This should change the Flot graph after clicking
	if (isset($form_state['input']['_triggering_element_value']) && $form_state['input']['_triggering_element_value'] == "Show Graph & Table") {
		$form['flotGraph']['#markup'] = theme_flot_graph(getNewGraphVars());
	}
	return $form;
}

If I click the button, it should change the markup of the flot graph to the new one. Instead, the graph just disappears. What am I doing wrong?

Comments

Most likely reason is that

nevets commented 22 February 2012 at 16:32

Most likely reason is that theme_flot_graph() uses jQuery(document).ready(function(). It would need to implement Drupal behaviors for this to work.

Side note, you should not call theme functions directly, instead they should be called as theme('flot_graph', $data).

Thank you for the reply.

longphant commented 22 February 2012 at 16:55

Thank you for the reply.

1) Would I be able to implement the function of changing the graph from the AJAX callback myself?
2) The example module that was provided uses theme_flot_graph. Why is it bad to call it directly?

On of the features of theming

nevets commented 22 February 2012 at 17:08

On of the features of theming is the ability to override the default layout. By calling the function directly any override is ignored.

My approach would be to copy the default theme_flot_graph() either to a module or the themes template.php file and replace 'theme' with the module or theme name (depending on where I implemented it) and try replacing the onload to use behaviors instead. See Managing JavaScript in Drupal 7, search for 'Behaviors'.