Ajax генерирует желаемый код (Fusion Chart), но div не обновляется

Я пытаюсь использовать 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
}

Поток (или, по крайней мере, должен быть, как я думаю):

  1. Загрузить страницу и AJAX;
  2. AJAX требует данные от контроллера/действия;
  3. AJAX генерирует JS-код FusionChart в <script id="sinistralidadePSScript">;
  4. Код FusionChart JS в <script id="sinistralidadePSScript"> отображает диаграмму в <div id="sinistralidadePlanoSaude">
  5. В соответствии с выбранной опцией изменяется источник данных, и этот цикл перезапускается с шага 2.

Ну, есть идеи? Как я могу помочь вам помочь мне?


person victorf    schedule 15.04.2014    source источник


Ответы (1)


Попробуй это,

 <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.render("sinistralidadePlanoSaude")
            chartReference.setXMLData(data);
        },         
        error: function (XMLHttpRequest, textStatus, errorThrown) {},
        complete: function (XMLHttpRequest, textStatus) {
            true
        }
        });
        });
    </script>
person Carlos Eduardo    schedule 15.04.2014
comment
О, великое прозрение! Вы обязательно обновляете объект FusionCharts. Это работает отлично. Спасибо большое, незнакомец! - person victorf; 15.04.2014