AJAX load doesn't run javascript

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

Stick all the stuff you want to do in a function and run that function in the callback that load() provides. — adeneo
– adeneo, Commented Sep 11, 2012 at 11:29
I think you just cannot do that. It would require to have some kind of a sandbox for the graphmaker.php where the page would render and the Javascript (related to that page) could run. I think the only thing you can do is to include the Google Charts Visualisation into your current page and "call" it after you added the DIV content — devnull69
– devnull69, Commented Sep 11, 2012 at 11:30

Gijs · Accepted Answer · 2012-09-11 13:23:10Z

2

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

edited Sep 11, 2012 at 13:23

answered Sep 11, 2012 at 11:36

Gijs

5,2401 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dave Clarke Over a year ago

Could you explain more about the timeoutloop/event handler - this may need to be spoon fed, apologies! This looks like it'll work though, yay :)

Gijs Over a year ago

It depends on the result of the scripts. Do they set the src attribute of an image tag? Or write to a canvas? Or...? Do they perhaps fire an event? You would somehow need to deduce that the script has 'finished', and how you do that obviously depends on what the script does. Adding a link to some live code in your question would help with this.

Dave Clarke Over a year ago

OK - here is a copy of graphmaker.php (pastebin.com/bMQgCmjx). What are your thoughts? Unfortunately I can't provide a live link as the code is running behind a login - apologies.

Gijs Over a year ago

Hmm, in this case, it would actually probably make more sense to load only the data via AJAX, and then generate the graphs in your main page. So you could make the php return a JSON structure with the graph data (the data you currently pass to the addRows API). Then you could use that to generate the right graph yourself from the main page.

Gijs Over a year ago

I've added the timeout loop code anyway, although I still recommend you use JSON only for the data, and create the graphs in the main page. In any case, the timeout loop works by checking if the element containing the graph is still empty. If it's not, it moves the element to the container you specified. Note that the resulting DOM events might affect the graph API's functioning... I'm not familiar enough with the graph API to tell (another reason to use pure JSON for the data, and create the graphs from the main page, really).

|

Nick · Accepted Answer · 2012-09-11 11:35:27Z

0

I think you need to use

$.getScript()

Or You can try

$.ajax({
 url: url,
 dataType: "script",
 success: success
});

Please check the API

answered Sep 11, 2012 at 11:35

Nick

1,8693 gold badges24 silver badges33 bronze badges

Comments

JanHocevar · Accepted Answer · 2012-09-11 11:39:27Z

0

Instead of $.ajax I suggest you using $.post function, so try something like this:

$.post('graphmaker.php', { data : dataSource },
  function(data) {
    //On Success
  }
)

answered Sep 11, 2012 at 11:39

JanHocevar

1992 silver badges9 bronze badges

Collectives™ on Stack Overflow

AJAX load doesn't run javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related