Google charts over ajax works first time only - php

Question

This is two questions in one, the actual state of my code is this:
<script type="text/javascript">
init_ui();
function init_ui() {
$("[rel='tooltip']").tooltip();
$(".ajax_link").live("click",function(){
id = $(this).attr("id");
jQuery("#ajax_div").html('<img src="../../../../bundles/donepunctis/img/loading.gif" alt="loading...">');
jQuery.ajax({
url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
success:function(result){
jQuery("#ajax_div").html('');
//alert(data);
chart.draw(data, options);
}
});
})
}
var data;
var options;
var chart;
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('ajax_div'));
}
</script>
At the moment im just ignoring the return from the ajax call, using the data to the chart somministrated hard coded on the var data.
how should look my echo on the php side to return the same value I'm using right now, but passed from the ajax return?
this code is working fine the first time, but if try to click again ajax_link the ajax call is fired but the google chart code doesn't do anything. Why is that?

Answer 1

This code is working fine the first time, but if try to click again ajax_link the ajax call is fired but the google chart code doesn't do anything. Why is that?
Look at the success callback from your $.ajax call:
jQuery.ajax({
url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
success:function(result){
jQuery("#ajax_div").html('');
chart.draw(data, options);
}
});
You are calling chart.draw(data, options);, which simply redraws the chart with the data you last populated it with.
You probably want to call drawChart and pass in the new data:
jQuery.ajax({
url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
success:function(result){
jQuery("#ajax_div").html('');
drawChart(data);
}
});
Then in drawChart you can populate the chart with your new data:
function drawChart(myData) {
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
if(myData) {
// TODO: add rows based on myData
} else {
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
}
...