Question

I have a script that does graphing, using jqplot. It works fine when the document is loaded rendering each graph using jquery’s .each method. However, the problem lies when I replace the div with another one when a bar is clicked. It is suppose to render another graph in the position of the old graph. It changes the graph but does not execute the script.

The script that loads the items has this function to change all divs to graphs:

$("div.barchart").each(function(){
    barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});

is there another way to do this so that it would work when a div is changed too?

Update:

Rails generates a script that is ran. However, it doesn’t seem to work when I have this:

chart$=$("#<%=params[:chart_id]%>");
chart$.replaceWith("<%=escape_javascript(render :partial=>"chart_partial"}%>");
barChart(chart$.get(0).attr("id"),chart$.get(0).attr("data-xmlurl"));

Note:

For reference, the actual source code can be found in the jquery_cheats project

Answer 1

Perhaps you could add a listener on the parent element? Is it OK if the barChart() function gets called more than once?

Maybe something like this:

$("div.barchart").parent().on("DOMSubtreeModified", function(e) {
    // (or maybe use DOMNodeInserted event instead)
    $("div.barchart[id][data-xmlurl]").each(function() {
        barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
    });
});

You can check out my jsFiddle for this here.