谷歌圖表在Ajax的工作原理僅第一次

Question

這是一兩個問題，我的代碼的實際狀態是這樣的：

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

目前我只是忽略來自AJAX調用返回，使用數據到var數據上硬編碼的圖表。

1. 如何看待我的回聲在PHP方面返回相同的值我現在使用，但從ajax返回？

2. 此代碼第一次運行良好，但如果再次嘗試點擊ajax_link，則會觸發ajax調用，但Google圖表代碼不會執行任何操作。這是爲什麼？

Answer 1

此代碼工作正常第一次，但如果嘗試再次單擊ajax_link Ajax調用被激發，但谷歌的圖表的代碼沒有做任何事情。這是爲什麼？

看那成功回調從您的通話$.ajax：

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); 
    } 
}); 

要調用chart.draw(data, options);，它只是重繪與上次與填充它的數據圖表。

你可能想打電話drawChart並傳入新的數據：

jQuery.ajax({ 
    url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id, 
    success:function(result){ 
    jQuery("#ajax_div").html(''); 
    drawChart(data); 
    } 
}); 

然後在drawChart你可以用新的數據填充圖：

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] 
    ]); 
    } 
    ...