CFDIV and CFCHART, Using frames for a Dynamic Chart

Question

I have a website that uses CFCHART extensively to list various organizational statistics about our company: Like the percentage of male vs. female team members, ethnic heritage breakdown for EEO compliance and the like. The old website we had to perform these actions is currently being updated, and the old site used a frame based layout for displaying the content of charts along with data and assumptions used when they were created. The basic Frame looks like this:

In the left Column we have a display of content that is currently hard coded. This is making the maintenance of hundreds of reports a nightmare because each page has its own hard-coded HTML options. We're addressing this by using a bunch of different CFINCLUDE statements that contain the same dropdown options that are using repeatedly in reports.

We want the center content pane to be updated whenever the user clicks on a "GO" button currently contained in the left panel frame.

We've heard repeatedly that using frames for a website leads to a lot of production issues. We're also trying to make the site as easy to maintain as possible, so we're avoiding using frameworks like JQuery or SPRY whenever possible.

To get rid of the frames, We're currently using CFLAYOUT to segment the new page. We have a CFLAYOUTAREA nested to hold the new left hand side pane and the center content pane. Within the center content pane, we have another nested CFLAYOUT with a CFLAYOUTAREA of type Tab that has a Chart, Excel Data, and the assumptions used in the chart. (apologies, the information at the left in the drop downs is sensitive and I cannot show it)

The Challenges:

![enter image description here][2]

I'm trying to figure out how I can get the center portion of the site to refresh without refreshing the top or left hand side of the page and make only the graph and data tabs refresh when the user clicks on the go button. I've searched the interwebs looking for a Javascript function with a Coldfusion but it doesn't seem that there is an option to refresh a tab.

Solutions tried: I tried creating the tabs with a ColdFusion.Layout.createTab() script and applying it to the image button on the go side. This seems to cause some issues with the layout because the items are nested.... The Syntax doesn't work.

I tried Javascript to refresh the page but this makes the form lose all the options the user selects on the left hand side.

It would be nice if the charts would be created in new tabs and that the data is persistent enough for a user to click back and forth and view the options they selected to create the graph. I look forward to your responses.

score 0 · Answer 1 · answered Apr 04 '12 at 15:44

The solution here was to add a script to the top of my page and use a bit different syntax of what ColdFusion normally uses to make an AJAX pass to the center pane. Rather than using CFLAYOUT, I instead elected to use a refreshing DIV. The script that handles the refresh of the DIV and the syntax for passing things to the refreshed DIV are displayed below:

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

The page DIV uses a CFDIV tag with a bind to refresh the AJAX content on each control:

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

score 0 · Answer 2 · answered Apr 03 '12 at 03:33

0

You could use jQuery and the load() method - http://api.jquery.com/load/. This will allow you to pass values to the page that generates the chart and then display the resulting HTML in an element on your page. You would likely even be able to use the same exact .cfm pages that were being loaded in the framed page.

answered Apr 03 '12 at 03:33

Scott Stroz

7,510
2
21
25

I figured out a solution to my problem. I included a script that looks like this: And by using CFDIV, I can pass parameters with a simple bind, like this: – Brad Hines Apr 04 '12 at 15:39
Scott - Thanks for Suggesting JQUERY. I think a lot of people that work with ColdFusion are finding the CFML script functions and layout functions to be poorly documented, leading them to use other solutions outside of the framework. Thanks for your contribution. – Brad Hines Apr 04 '12 at 15:45

CFDIV and CFCHART, Using frames for a Dynamic Chart

The Challenges:

2 Answers2