Update Widget Values On Dropdown List Change

Hi All,

I have a simple dropdown list and a chart widget. I wanted to load different values to the chart on changing the dropdown list as shown here. 4961


When i change the dropdownlist, I just want to load a different value to the widget altogether, I am calling a different function in the controller . But I get a blank page instead. Please let me know what is wrong in the code here. thanks.

View: index.php


echo CHtml::dropDownList('country_id', '', array(1 => '1', 2 => '2', 3 => '3'), array(

    'prompt' => 'Select Region',

    'ajax' => array(

        'type' => 'POST',

        'url' => CController::createUrl('site/load'),

        'update' => '#update',



<div id="update">

    <?php $this->renderPartial('_index', array('chartDataProvider' => $chartDataProvider)); ?>


view: _index.php


$this->widget('ext.WhVisualizationChart', array(

    'visualization' => 'PieChart',

    'data' => $chartDataProvider,

    'options' => array(

        'pieHole' => '0.5',

        'backgroundColor' => array('fill' => 'transparent'),


    'htmlOptions' => array('style' => 'width:100%; height:375px'),



Controller code:

public function actionIndex() {

        // renders the view file 'protected/views/site/index.php'

        // using the default layout 'protected/views/layouts/main.php'

        $chartDataProvider = array(

            array('Task', 'Hours per Day'),

            array('Work', 11),

            array('Eat', 2),

            array('Commute', 2),

            array('Watch TV', 2),

            array('Sleep', 7)


        $this->render('index', array('chartDataProvider' => $chartDataProvider));


    public function actionLoad() {

        $chartDataProvider = array(

            array('Task', 'Hours per Day'),

            array('Work', 20),

            array('Eat', 20),

            array('Commute', 20),

            array('Watch TV', 20),

            array('Sleep', 20)


        $this->renderPartial('_index', array('chartDataProvider' => $chartDataProvider));


Hi, I think the issue is that due to repetitive ajax calls, you are loading he widget’s javascript file(s) more than once and it causes js conflicts. I mean whenever _index.php is rendered (i.e. a new option is selected in the dropdown list), the widget runs and registers some duplicate js files.

You should disable the widget’s js files by maybe using


and add them manually to index.php (or layout file) yourself.

hope it helps.