Я пытаюсь использовать Ajax для получения некоторых данных xml от контроллера (в Grails Framework) для библиотек Fusion Charts, а затем отображать диаграмму, которая будет меняться в соответствии с тегом <select>
html. Этот <select>
будет передавать параметр, который заставляет контроллер вносить определенные данные в соответствии с событием onChange для отображения диаграммы.
Когда мы загружаем страницу в первый раз, диаграмма загружается отлично, независимо от значения, полученного в <select>
(в данном случае ['',1,2]). Но если я нажму на другую опцию <select>
, она не сработает, и страница сохранит первую диаграмму. Вот код:
Просмотр (dashboard.gsp)
Выбирать:
<select id="selecionaConta" class="selectConta" name="selecionarConta">
<option selected="selected" value="">select an option...</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
</select>
Раздел:
<div class="boxTopo grafico1">
<h1 class="nome_area">Sinistralidade no Plano de Saúde</h1>
<div id="sinistralidadePlanoSaude"></div>
<script type="text/javascript" id="sinistralidadePSScript"></script>
</div>
АЯКС:
<script>
$('#selecionaConta').change(function(){
jQuery.ajax({
type: 'POST',
data: {'beneficio': $('#selecionaConta').val()},
url: '/vs3/dashboard/getSinistralidadePSChart',
success: function (data, textStatus) {
jQuery('#sinistralidadePSScript').html(
'var chart = new FusionCharts("Area2D", "sinistralidadePSSpan", "650", "300", "0", "0","");' +
"chart.setXMLData('" + data + "');" +
'chart.render("sinistralidadePlanoSaude");'
);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {},
complete: function (XMLHttpRequest, textStatus) {
true
}
});
});
</script>
и, наконец, DashboardController.groovy (контроллер)
def getSinistralidadePSChart(){
def chartXml = ''
if (params.beneficio == '1') {
chartXml = new WSChartsService().chart("vs3/chart/testeline/victor")
} else if (params.beneficio == '2'){
chartXml = new WSChartsService().chart("vs3/chart/testeline/victor").replace("567","999")
}
//only generate the xml that I need, which is already right.
def sinistralidadePSChartCode = chartXml.replace("'","\"")
render sinistralidadePSChartCode
}
Поток (или, по крайней мере, должен быть, как я думаю):
- Загрузить страницу и AJAX;
- AJAX требует данные от контроллера/действия;
- AJAX генерирует JS-код FusionChart в
<script id="sinistralidadePSScript">
; - Код FusionChart JS в
<script id="sinistralidadePSScript">
отображает диаграмму в<div id="sinistralidadePlanoSaude">
- В соответствии с выбранной опцией изменяется источник данных, и этот цикл перезапускается с шага 2.
Ну, есть идеи? Как я могу помочь вам помочь мне?