How to run processing.js using jQuery's getScript

Question

I have made a processing sketch which I want to include on my blog.

The recommended way like so works fine:

<script src="js/libs/processingjs.js"></script>

I only want to load processingjs if there is an sketch on the page, I wanted to achieve this using jQuery's getScript. However when I run this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function() {
        $.getScript('js/libs/processingjs.js');
    });
</script>

The processing sketch will not get rendered. There should be no callback necessary since processing would run on its own. My web inspector shows that the file has been loaded, but I don't see the sketch.

can't get it to work at fiddle, here is a working version (using html script): http://mikevanrossum.nl/stuff/temp/working.html and here is a non-working one (using getScript): http://mikevanrossum.nl/stuff/temp/not-working.html — askmike, Apr 10 '12 at 09:15

score 0 · Answer 1 · answered Apr 10 '12 at 10:01

0

Is it possible that processing.js is built in a way that it can't be loaded after document.ready? (just an example of such a bad practise would be to use document.write) so it works when it's included in the html, but not if it's loaded later? What happens if you add the script tag yourself:

var script = document.createElement("script");
script.src = "/js/libs/processingjs.js";
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

answered Apr 10 '12 at 10:01

Gavriel

18,880
12
68
105

That also does not work, however I found the answer: somehow you need to load it yourself using a Processing function. This is what I use now: $.getScript("processingjs.js", function() { $('.sketch').each(function() { Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]); }); }); – askmike Apr 10 '12 at 10:11

score 0 · Accepted Answer · answered Apr 10 '12 at 22:58

Flöcsy's suggestion does not work for me. It appears that whenever I ajax the script I need to specify the script to load the sketches (instead of the script just searching for them). This is the code I am using now:

//processing
if($('.sketch').length) {
    $.getScript("processingjs.js", function() {
        $('.sketch').each(function() {
            Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);
        });
    });
}

How to run processing.js using jQuery's getScript

2 Answers2