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

Screenshot.png
.

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


<?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)); ?>

</div>

view: _index.php


<?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


scriptMap['JS_file_name']=false

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

hope it helps.