Highcharts、Yii 和正文内容重新加载

Posted 2023-05-08

【中文标题】Highcharts、Yii 和正文内容重新加载

【英文标题】：Highcharts, Yii and body content reloading

【发布时间】：2014-08-20 21:50:56

【问题描述】：

我有一个在 CListView 和 Highcharts 图形中呈现一些数据的视图。

请注意CListView 的寻呼机的工作方式如下：它向服务器请求“新页面”，服务器呈现页面的全部内容并将其发送到CListView。然后将正文替换为正在发送的内容，如下所示：$('body').html(rendered_html_response)。

我也有一个模仿这种行为的dropDownList。这是代码：

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

总之，有问题。当我使用CListView 时，一切正常（例如：刷新页面内容而不重新加载页面，图表和数据正确呈现等...），但是当我使用@987654328 选择某些内容时@，服务器渲染回复，发送给客户端，客户端开始替换body的内容，但是我得到这个错误：http://www.highcharts.com/errors/16。

我尝试以这种方式禁用highcharts.src.js：

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

然后我得到典型的undefined javascript 错误（意味着 something 正在尝试使用未定义的Highcharts）。

问题出在哪里，我该如何解决？

【问题讨论】：

请编辑您的帖子并添加所有相关代码sn-ps，例如（主视图、部分视图和控制器）

【参考方案1】：

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

【讨论】：

这并不能解决问题。我尝试将该代码放在多个地方。发送请求之前/之后，替换 DOM 之前/之后以及插入新图表之前。

【参考方案2】：

按照错误链接所述

页面中已经定义了Highcharts

此错误在第二次在同一页面中加载 Highcharts 或 Highstock 时发生，因此已经定义了 Highcharts 命名空间。请记住，Highcharts.Chart 的构造函数和 Highcharts 的所有功能都包含在 Highstock 中，因此如果您将 Chart 和 StockChart 组合运行，则只需加载 highstock.js 文件即可。

您正在加载 highcharts javascript 两次。你可以试试

a) 在第一次加载时启用 highcharts，然后在下一次加载时禁用它，例如检查是否 ajax

b) 使用自定义 javascript 检查是否已加载 highcharts，如 this blog post

c) 使用 NLSClientScript extension 为您处理 js 和 css 加载

我建议你使用最后一个。我被这个问题咬了几次，直到我发现它。它消除了单独列出每个 javascript 函数/文件的需要。

编辑

您可以编辑代码以使用相同的 update 函数，而不是编辑 listview js：

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

【讨论】：

AFAIK 我正在我的beforeAction 代码中执行您的a 建议，对吧？那也不行。

没有。您的 beforeAction 首先阻止了 highcharts 加载，因此出现错误。

不，我的beforeAction仅在是 AJAX 请求时才阻止加载脚本（因此是第二次）。

是的，我的错。我没有完全阅读你的评论。可能是因为您要替换 body。 CListView 仅替换它的 html 元素而不是正文。

再次，AFAIK CListView 请求整个正文并替换整个正文。至少这是我在请求响应中看到的。