Clever Geek Handbook

Updating Javascript variable using AJAX

I'm working on a project with FusionCharts that requires me to update a javascript variable with an AJAX request. FusionChart fills itself with an XML tag in the tag chart1.setDataXML()

as shown 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 this XML in this script with an AJAX request. I created a function that updates the chart, but I can't figure out how to bring the AJAX to 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 a way to force my AJAX request to update the 'response' variable?

+2


source to share


3 answers


something like:



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


source


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, do the 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 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.

+1


source


Yes. Just submit the request using XMLHttpRequest object and read XMLHttpRequest.response into your own response variable.

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

0


source






More articles:


All Articles