0

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

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

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

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

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

挑战：

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

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

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

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

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

4

2 回答 2

0

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

于 2012-04-03T03:33:15.583 回答
0

这里的解决方案是在我的页面顶部添加一个脚本，并使用与 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>
于 2012-04-04T15:44:03.450 回答