jQuery load function from external file

Question

I have script place in one file and pulling the data from that file via load() function. But the script does get loaded.

$( ".panel-default" ).html("<img class='loader' src='../catalog/kuko/loading.gif' />").load( "../catalog/kuko/embed.php .affil_wrap", function(){       
charting(); <- this doesn't get loaded      
} );

this is the script in external file where I'm getting it from:

// pie chart   
function charting(){
var pieData = [
                <?php               
                while ($row2 = mysqli_fetch_array($sqli2)) {                    
                echo    '{
                            value: '.$row2["total_clicks"].',
                            color: "#'.random_color().'",
                            highlight: "#333",
                            label: "' .$row2["name"].'"
                            },';
                }
                ?>
                ];

                var ctx = document.getElementById("chart-area").getContext("2d");
                window.myPie = new Chart(ctx).Pie(pieData);


                // line chart

        var lineChartData = {
            labels : [<?php echo implode(',',array_keys($res_array)) ?>],
            datasets : [                
                {
                    label: "Audience Overview",
                    fillColor : "#e6f4fa",
                    strokeColor : "#058dc7",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [<?php echo implode(',', array_values($res_array)); ?>]
                }
            ]
        }
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    responsive: true
                });
}
charting();

Answer 1

Use getScript() and see if the following code works for you:

var container = $(".panel-default");
$(container).html("<img class='loader' src='../catalog/kuko/loading.gif' />");
$.getScript("../catalog/kuko/embed.php")
    .done(function( script, textStatus ) {
        charting(); // call the function once the script has been loaded and parsed
    })
    .fail(function( xhr, settings, exception ) {
        console.log(xhr.responseText);
        $(container).html("Error while loading.");
    });