CFDIV和CFCHART，使用动态图表的框架

Question

我有一个网站，该网站广泛使用CFCHART来列出有关我们公司的各种组织统计数据：如男性与女性团队成员的百分比、EEO合规性的种族遗产分类等。我们必须执行这些操作的旧网站目前正在更新中，旧网站使用基于框架的布局来显示图表的内容以及创建图表时使用的数据和假设。基本框架如下所示：

在左列中，我们显示了当前硬编码的内容。这使得维护数百个报告成为一场噩梦，因为每个页面都有自己的硬编码HTML选项。我们通过使用一组不同的CFINCLUDE语句来解决这个问题，这些语句包含在报告中重复使用的相同下拉选项。

我们希望每当用户单击当前包含在左侧面板框架中的"GO"按钮时，中心内容窗格都会更新。

我们反复听说，在网站上使用框架会导致很多生产问题。我们还试图使网站尽可能易于维护，因此尽可能避免使用JQuery或SPRY等框架。

为了去掉框架，我们目前正在使用CFLAYOUT来分割新页面。我们嵌套了一个CFLAYOUTAREA来容纳新的左侧窗格和中心内容窗格。在中心内容窗格中，我们有另一个嵌套的CFLAYOUT，其CFLAYOUTAREA类型为Tab，具有图表、Excel数据和图表中使用的假设。（抱歉，下拉列表中左侧的信息很敏感，我无法显示）

---

挑战：

[在此输入图像描述][2]

我正试图弄清楚如何在不刷新页面顶部或左侧的情况下刷新网站的中心部分，并在用户单击"开始"按钮时只刷新图形和数据选项卡。我在interwebs中搜索了一个带有Coldfusion的Javascript函数，但似乎没有刷新选项卡的选项。

尝试过的解决方案：我尝试用ColdFusion.Layout.createTab（）脚本创建选项卡，并将其应用于go端的图像按钮。这似乎会导致布局出现一些问题，因为项目是嵌套的。。。。语法不起作用。

我尝试用Javascript刷新页面，但这会使表单失去用户在左侧选择的所有选项。

如果图表将在新的选项卡中创建，并且数据足够持久，用户可以来回点击并查看他们为创建图表选择的选项，那就太好了。我期待你的答复。

Answer 1

您可以使用jQuery和load（）方法-http://api.jquery.com/load/.这将允许您将值传递给生成图表的页面，然后在页面上的元素中显示结果HTML。您甚至可能能够使用框架页面中加载的完全相同的.cfm页面。

Answer 2

这里的解决方案是在我的页面顶部添加一个脚本，并使用与ColdFusion通常用于将AJAX传递到中心窗格的语法略有不同的语法。我没有使用CFLAYOUT，而是选择使用刷新DIV。处理DIV刷新的脚本和将内容传递给刷新DIV的语法如下所示：

<script>
    function refreshDiv() {
    ColdFusion.Ajax.submitForm('graphOptionsFORM','graphStaffPlanningToolShow.cfm',callBack,errorHandler);
    ColdFusion.navigate('graphStaffPlanningToolShow.cfm','graphContent'); 
    }
    function callBack(text) {
        return true;
    }
    function errorHandler(code, msg) {
        alert("Error: " + code + " " + msg);
    }
</script>

页面DIV使用带有绑定的CFDIV标记来刷新每个控件上的AJAX内容：

<CFDIV id="graphContent" 
    bind="url:graphStaffPlanningToolShow.cfm?ORG_STR={ORG_STR}&ORGNUM={ORGNUM}&JOB_DISC={JOB_DISC}&FLSA_STATUS={FLSA_STATUS}&LAB_SITE={LAB_SITE}&HEADCOUNT_OVERRIDE={HEADCOUNT_OVERRIDE}&EXTERNAL_SEPERATIONS={EXTERNAL_SEPERATIONS}&INTERNAL_MOVEMENTS={INTERNAL_MOVEMENTS}" />
</CFDIV>