CFDIV и CFCHART, Использование фреймов для динамического графика

У меня есть веб-сайт, на котором CFCHART широко используется для перечисления различной организационной статистики о нашей компании: например, процентное соотношение мужчин и женщин в команде, разбивка по этническому происхождению для соответствия требованиям EEO и тому подобное. Старый веб-сайт, на котором мы должны были выполнить эти действия, в настоящее время обновляется, а старый сайт использовал макет на основе фреймов для отображения содержимого диаграмм вместе с данными и предположениями, которые использовались при их создании. Базовый фрейм выглядит так:

В левом столбце у нас есть отображение содержимого, которое в настоящее время жестко запрограммировано. Это превращает ведение сотен отчетов в кошмар, потому что каждая страница имеет свои собственные жестко заданные параметры HTML. Мы решаем эту проблему, используя набор различных операторов CFINCLUDE, которые содержат те же параметры раскрывающегося списка, которые неоднократно используются в отчетах.

Мы хотим, чтобы центральная панель содержимого обновлялась всякий раз, когда пользователь нажимает кнопку «GO», которая в настоящее время находится в фрейме левой панели.

Мы неоднократно слышали, что использование фреймов для веб-сайта приводит к множеству производственных проблем. Мы также стараемся сделать сайт максимально простым в обслуживании, поэтому по возможности избегаем использования таких фреймворков, как JQuery или SPRY.

Чтобы избавиться от фреймов, в настоящее время мы используем CFLAYOUT для сегментации новой страницы. У нас есть вложенная CFLAYOUTAREA для размещения новой левой боковой панели и центральной панели содержимого. В центральной панели содержимого у нас есть еще один вложенный CFLAYOUT с CFLAYOUTAREA типа Tab, который содержит диаграмму, данные Excel и допущения, используемые в диаграмме. (извините, информация слева в раскрывающемся списке является конфиденциальной, и я не могу ее показать)

Испытания:

! [введите описание изображения здесь] [2]

Я пытаюсь понять, как я могу обновить центральную часть сайта, не обновляя верхнюю или левую часть страницы, и сделать так, чтобы обновлялись только вкладки графика и данных, когда пользователь нажимает кнопку перехода. Я поискал в сети в поисках функции Javascript с помощью Coldfusion, но мне не показалось, что есть возможность обновить вкладку.

Попробованные решения: я попытался создать вкладки с помощью сценария ColdFusion.Layout.createTab () и применить его к кнопке изображения на стороне перехода. Кажется, это вызывает некоторые проблемы с макетом, потому что элементы вложены .... Синтаксис не работает.

Я пробовал Javascript для обновления страницы, но из-за этого форма теряет все параметры, которые пользователь выбирает с левой стороны.

Было бы неплохо, если бы диаграммы создавались на новых вкладках и чтобы данные были достаточно постоянными, чтобы пользователь мог щелкать туда-сюда и просматривать параметры, выбранные для создания диаграммы. Жду ваших ответов.


tabs coldfusion frames cfchart
person Brad Hines    schedule 02.04.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать jQuery и метод load () - http://api.jquery.com/load/. Это позволит вам передавать значения на страницу, которая генерирует диаграмму, а затем отображать полученный HTML-код в элементе на вашей странице. Скорее всего, вы даже сможете использовать те же самые страницы .cfm, которые загружались на страницу с фреймами.

person Scott Stroz    schedule 03.04.2012
comment
Я придумал решение своей проблемы. Я включил сценарий, который выглядит следующим образом: ‹script› function refreshDiv () {ColdFusion.Ajax.submitForm ('graphOptionsFORM', 'graphStaffPlanningToolShow.cfm', callBack, errorHandler); ColdFusion.navigate ('graphStaffPlanningToolShow.cfm', 'graphContent'); } функция callBack (текст) {вернуть истину; } функция errorHandler (код, сообщение) {предупреждение (Ошибка: + код + + сообщение); } ‹/Script› А с помощью CFDIV я могу передавать параметры с помощью простой привязки, например: - person Brad Hines; 04.04.2012
comment
Скотт - Спасибо, что предложили JQUERY. Я думаю, что многие люди, работающие с ColdFusion, считают, что функции сценария CFML и функции компоновки плохо документированы, что побуждает их использовать другие решения вне фреймворка. Спасибо за ваш вклад. - person Brad Hines; 04.04.2012

arrow_upward
0
arrow_downward

Решением здесь было добавить сценарий в верхнюю часть моей страницы и использовать синтаксис, немного отличающийся от того, что обычно использует 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>
person Brad Hines    schedule 04.04.2012