chart tool wont load after successful submit event

[roy782]

Hello,

I'm trying to draw a pie chart after a form submit event

for some reason the page becomes bllank (after google.load)

and nothing is working. i tried to debug several times without success

can anyone please help me?

Thanks!

Roy

the code:

$(function(){

    $('#searchForm').submit(function(event){

        event.preventDefault();

        $('#MotifSearch').animate({

            left: '25%',

            width: '50%',

            height: '75%'

        }, 1500);

        $('#motifGraphTitle').animate({

            left: '25%'

        }, 1500);

        var formData = $(this).serialize();

        var empty = '';

        var jqxhr = $.post('formHandle.php', formData, loadGraph);

        

    

        jqxhr.success(function(){ 

            $.getJSON('loadTaxo.php', empty, loadTaxo).complete(function() { 

                google.load('visualization', '1.0', {

                    'packages':['corechart']

                    });

                google.setOnLoadCallback(drawChart);

                

            });

            

        });

        

        $('#taxoLabel').show(500);

    

        

      

        // Set a callback to run when the Google Visualization API is loaded.

        

        return false;

    });//end submit

    

});*/

[asgallant]

The google loader doesn't play nice with other AJAX (or, perhaps, vice-versa), so you should load the API first, and put your AJAX inside the callback function.

[roy782]

Thanks for the replay,

Is there a way to make sure that the callback function will be loaded only after i return from the ajax calls

becuase from the ajax calls i'm getting all the data for the chart tools.

But anyhow i will try to work around it if it's not possible

Thanks

Roy

[asgallant]

You just need to draw the chart in the success handler for the AJAX call:

​google.load('visualization', '1.0', {'packages': ['corechart']});

google.setOnLoadCallback(init);

function init () {

    $('#searchForm').submit(function(event){
        event.preventDefault();
        $('#MotifSearch').animate({
            left: '25%',
            width: '50%',
            height: '75%'
        }, 1500);
        $('#motifGraphTitle').animate({
            left: '25%'
        }, 1500);
        var formData = $(this).serialize();
        var empty = '';
        var jqxhr = $.post('formHandle.php', formData, loadGraph);
        
    
        jqxhr.success(function(){

            // you need to grab the returned data if you want to use it to draw the chart

            $.getJSON('loadTaxo.php', empty, loadTaxo).complete(function() {

                drawChart();

            });
        });
        
        $('#taxoLabel').show(500);