Cannot show google chart in a ajax loaded page

[sfl]

Hi,

2 pages:

• main.php 
  
• charts.php
  

when I point directly to charts.php everything works fine!

the issue is when I load charts.php with AJAX inside main.php page.

basically main.php loads with AJAX charts.php. Here I got the issue, google charts are not displayed and if I reload the page it goes blank.

Seems that it cannot load the google library properly, the error is Uncaught ReferenceError: google is not defined.

here is some details:

main.php

================================================================

....

<div class="row">

<div class="col-md-12">

<!-- Tab panes -->

<div class="fade in">

  <div id="loading" class="col-md-12 text-center"><h3><img src="images/loader.gif"> Loading...</h3></div>

        <div id="content" class="col-lg-12 col-md-12 col-xs-12"></div>

</div>

</div>

</div>

<script>

/**

 * Load the first page on page ready

 */

$( document ).ready(function() {

    $('#mainTab a:first').tab('show');

    loadFundDetailUrl('pages/charts.php?id=<?=$_Id?>');

});

/**

 * Load Urls with AJAX

 */

function loadDetailUrl(url){

    jQuery.ajax({

        type: "POST", // HTTP method POST or GET

        async: true,

        url: url, 

        dataType:"html", // Data type, HTML, json etc.

        data: null, //Form variables

        success:function(response){

            $("#content").html(response);

            $('#loading').hide();

        },

        error:function (xhr, ajaxOptions, thrownError){

            $("#content").html('Content not found!');

            $('#loading').hide();

            console.log(thrownError);

        }

    });

}

</script>

================================================================

charts.php

================================================================

<!-- USING GOOGLE CHARTS -->

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script>

    google.load("visualization", "1", {packages:["corechart"]});

</script>

<!-- PORTFOLIO COMPOSITION -->

<script type="text/javascript">

      function drawChart() {

                  .......

      }

    google.setOnLoadCallback(drawChart);

=================================================================   

Any suggestions ??? please help!   :-)

thnak you

[Andrew Gallant]

Do you specifically need to load the chart code via AJAX?  This is likely to be difficult to implement; I know several people have posted a question like this over the past few years, but I do not know of any successes off the top of my head (searching the forum may prove me wrong, however).

The more common use case is to keep the chart code in your main page and load the data via AJAX, which is rather easy to do, if that would work for you.

[sfl]

Thank you Andrew!
Basically I have a page that I use inside another page in many cases.
I cannot get over this issue, probably I need to refactoring my project if I want to use Google chart or find an equivalent solution :-(

I googled the issue but I did not find anything good.

Thank you