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

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

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

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

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

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

挑战： !！[在此处输入图像描述][2]

我试图弄明白如何在不刷新页面顶部或左侧的情况下刷新站点的中心部分，并在用户单击go按钮时仅刷新图形和数据选项卡。我在互联网站上搜索了一个带有Coldfusion的Javascript函数，但似乎没有刷新选项卡的选项

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

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

---

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

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

这里的解决方案是在我的页面顶部添加一个脚本，并使用与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>

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

---

我想出了解决问题的办法。我包括了一个类似这样的脚本：函数refreshDiv{ColdFusion.Ajax.submitForm'graphhoptionsform'，'graphStaffPlanningToolShow.cfm'，callBack，errorHandler；ColdFusion.navigate'graphStaffPlanningToolShow.cfm'，'graphContent'；}函数callBacktext{return true；}函数errorHandlercode，msg{alertError:+code++msg；}通过使用CFDIV，我可以通过一个简单的绑定传递参数，如下所示：Scott-感谢您建议使用JQUERY。我认为许多使用ColdFusion的人发现CFML脚本函数和布局函数的文档记录很差，导致他们使用框架外的其他解决方案。感谢您的贡献。