Updating a Javascript Variable with AJAX

Question

I am working on a project with FusionCharts that requires me to update a javascript variable with an AJAX request. The FusionChart populates itself with the xml within the 'chart1.setDataXML()' tag as seen below.

<div id="barGraph">
     Bar Graph
   </div>
   <script language="JavaScript">
      var chart1= new FusionCharts("/charts/Column3D.swf", "barGraph", "600", "400", "0", "1");
      chart1.setDataXML("<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0'><set label='Jan' value='462'/><set label='Feb' value='857'/><set label='Mar' value='671'/><set label='Apr' value='494'/><set label='May' value='761'/><set label='Jun' value='960'/><set label='Jul' value='629'/><set label='Aug' value='622'/><set label='Sep' value='376'/><set label='Oct' value='494'/><set label='Nov' value='760'/><set label='Dec' value='960'/></chart>");
      chart1.render("barGraph");
   </script>

As I said, I need to update that XML within that script with an AJAX request. I have created a function that updates the chart, but I can't figure out how to bring AJAX into play... Here's my function

<script type="text/javascript">
    function updateChart(domId){
        var response= "<chart></chart>"
     var chartObj = getChartFromId("barGraph");
     chartObj.setDataXML(response);
    }
    </script>

Is there any way I can make my AJAX request update the 'response' variable?

Answer 1

Yes. Simply send out the request using an XMLHttpRequest Object and read the XMLHttpRequest.response into your own response variable.

A very good tutorial on how to do so: http://www.w3schools.com/Ajax/Default.Asp

Answer 2

I'm not sure if you need help making the ajax call, or responding to it from the controller, I'm going to explain the controller side.

In the controller make an action:

def update_chart
   new_something = params[:sent_value]
   render :update do |page|
     page.call 'updateChart', new_something
   end
end

render :update returns javascript that will get run on the page.

page.call will run the function given in the first argument, and pass the rest of the arguments to .call as arguments to the javascript function.

Answer 3

something like:

new Ajax.Request('/your_remote_script.php', {
  method: 'get',
  onSuccess: function(transport) {
    var your_var = transport.responseText;
    updateChart(your_var);
  }
});