Ajax is generating the desirable code (Fusion Chart), but div is not updated

Question

I'm trying to use Ajax to get some xml data from a controller (in Grails Framework) for Fusion Charts libraries, and then render a chart, which will change according a <select> html tag. This <select> will pass a parameter which makes the controller bring some specific data according an event onChange for the chart to be rendered.

When we load the page for the first time, the chart loads perfectly, independently the value caught in <select> (in this case, ['',1,2]). But if I click on another <select> option, it does not work, and the page keep the first chart. Here is the code:

View (dashboard.gsp)

Select:

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

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

AJAX:

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

and finally DashboardController.groovy (controller)

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
}

The flow is (or least should be as I think):

1. Load page and AJAX;
2. AJAX requires data from controller/action;
3. AJAX generates FusionChart JS Code in <script id="sinistralidadePSScript">;
4. FusionChart JS Code in <script id="sinistralidadePSScript"> renders chart in <div id="sinistralidadePlanoSaude">
5. According selected option, the data source changes and this cycle restarts from step 2

Well, any idea? How could I help you to help me?

Answer 1

Try this,

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