load processing.js sketch with ajax on user click

Question

I'm trying to load a processing.js sketch with ajax on click and it's not working. It works if I load the sketch instantly, but not on a user interaction. Here's my code:

$('#clicker').click(function(){
    var canvasRef = $('<canvas/>');
    canvasRef.attr('data-src','/uploads/processing_js/anything_1.pde');
    $('#loader').append(canvasRef);
});

I've also tried 'data-processing-sources' and 'datasrc' for the attribute.

Anyone know why this doesn't work?

Answer 1

We only check the data-processing-sources attribute on DOMContentLoaded. If you want to load a Processing sketch after that, you could use Processing.loadSketchFromSources, which is what Processing.js uses internally to load a sketch:

$('#clicker').click(function(){
  var canvasRef = document.createElement('canvas');
  var p = Processing.loadSketchFromSources(canvasRef, ['/uploads/processing_js/anything_1.pde']);
  $('#loader').append(canvasRef);
});