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

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

0 голосов
/ 03 апреля 2012

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

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

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

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

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

Проблемы:

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

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 04 апреля 2012

Решение было в том, чтобы добавить скрипт вверху моей страницы и использовать немного другой синтаксис, который обычно использует 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>
0 голосов
/ 03 апреля 2012

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

...