Question

I have a main page with a graph on, a dropdown box allows the user to select which graph they want to see.

When the dropdown gets changed I want AJAX to load the correct graph from my file, graphmaker.php. This file has all the graphs in appropriate DIVs, i.e graph1, graph2 etc.

These graphs are generated using Google Charts Visualisation.

However, when I do this AJAX just loads an empty box and from what I have researched this is because the script on the page doesn’t get executed.

In essence, I want Ajax to:

• get graphmaker.php
• render the page
• then pull out the correct graph

My code:

function switchgraph(graph) {
var switchto = $("#graph"+graph+"_dd").val();
$('#graph'+graph).load('graphmaker.php #'+switchto);
}

Any suggestions?

Dave

Answer 1

Instead of using a selector with load, which removes the scripts, select the relevant graph once the AJAX call has finished:

function switchgraph(graph) {
    var switchto = $("#graph"+graph+"_dd").val();
    $('#graph'+graph).load('graphmaker.php', function onComplete() {
       function doMoveGraph() {
           $('#graph' + graph).empty().append(toBeUsed);
       }
       function checkMoveGraph() {
            if (!toBeUsed.is(":empty")) {
                doMoveGraph();
            } else {
                setTimeout(checkMoveGraph, 100);
            }
       }
       var toBeUsed = $(this).find('#'+switchto);
       setTimeout(checkMoveGraph, 100);
    });
}