Highcharts, Yii and body content reloading

问题:

I have a view that renders some data in a CListView and a Highcharts graphic.

Please note that the pager of the CListView works the following way: it requests the "new page" to the server, the servers renders the entire content of the page and sends it to the CListView. The body is then replaced with the content that is being sent, with something like this: $('body').html(rendered_html_response).

I also have a dropDownList that imitates this behavior. This is the code:

<?php
    echo CHtml::dropDownList('usage', 'cg', array(
        'd'=>'Daily',
        'm'=>'Monhly'
    ), array(
        'ajax'=>array(
            'type'=>'POST',
            'url'=>$this->createUrl('admin/user', array(
                'id'=>$user->id)
            ),
            'update'=>'body',
            'data'=>array('cg'=>'js:$(this).val()'), 
            'options'=>array(
                Yii::app()->session['cg']=>array(
                    'selected'=>true
                )
            )
        )
    ));
?>

Anyways, there is a problem. When I use the CListView, everything works fine (as in: the page's content is refreshed without the page being reloaded, the charts and the data are rendered correctly, etc...), but when I select something using the dropDownList, the server renders the reply, sends it to the client, the client starts replacing the content of body, but then I get this error: http://www.highcharts.com/errors/16.

I tried disabling highcharts.src.js this way:

public function beforeAction(){
    if(Yii::app()->request->isAjaxRequest){
        Yii::app()->clientScript->scriptMap['highcharts.src.js'] = false;
    }
    return true;
}

but then I get the typical undefined javascript error (means that something is trying to use Highcharts, which is not defined).

Where is the problem and how can I fix it?

回答1:

//init
$('#container').highcharts({});
//select onchange
$('#container').highcharts().destroy();

回答2:

As following the error link says

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

You are loading the highcharts javascript twice. You can try

a) enabling highcharts on the first load and then disabling it on the next e.g perhaps checking if ajax

b) use custom javascript to check whether highcharts has been loaded as in this blog post

c) use the NLSClientScript extension that handles js and css loading for you

I suggest you use the last one. I was bitten by this problem a couple of times until I discovered it. It eliminates the need to single out each javascript function/file.

EDIT

Instead of editing the listview js, you can edit your code to use the same update function:

<?php
    echo CHtml::dropDownList('usage', 'cg', array(
        'd'=>'Daily',
        'm'=>'Monhly'
    ), array(
        'onChange'=>'$.fn.yiiListView.update("your-list-id", {
            data: {"usage":$(this).val()},
            type: "POST"
        });'
    ));
?>