Apologies if there is a demo out there, but I have not been able to find it.
I have an Accordion that is dynamically built but would like to refactor to load a panel’s content only when it becomes active. So far, I rooted out everything but the header build from a summary query and a generic “Loading…” div in each panel. So the controller has:
public function actionVolunteers()
{
$this->render('overview', array(
'areaTotals' => Area::volunteerTotals(),
));
}
…and the view, in part, builds stripped-down the Accordion from this:
<?php
$panels = array();
foreach ($areaTotals as $total) {
$panels['Area ' . $total['area'] . ': ' . $total['volunteers']] =
'<div id=' . $total['area'] . '>Loading ...</div>';
}
?>
<h4>Current Volunteers Summary</h4>
<?php
$this->widget('zii.widgets.jui.CJuiAccordion',array(
'panels'=> $panels,
'options'=>array(
'collapsible' => TRUE,
'active' => FALSE,
),
));
?>
What I want to do is AJAX back to the controller to get a JSON response with content for the panel when activated. I have to pass back the area value for the panel that is being activated. I know how to write the controller action, but I am not sure how to initiate it from the widget. I assume it has to happen from the activate or beforeActiveate event of the widget, right? Something like:
'options'=>array(
'collapsible' => TRUE,
'active' => FALSE,
'beforeActivate' => 'js:function(event, ui) {
// do the Ajax call using get or post here
},
),
Does anyone have a working example of how the callback might look?
(I have never tried to lazy load an accordion this way.)
Thanks in advance…