0

i'm new on jquery, and i have a doubt about use of jquery use with Processing.js

I have some of links on sidebar; each of them is a lesson, and in one of these lessons i have a

<p>blablablablabla</p>
<div id='processing'></div>

()

Then, when user click in the lesson (the content above), the webpage update the content, and call a jquery Plugin, if found the id #processing, calling

$.Processing('#processing', 'afile.pde') 

(the plugin)

(function(){

var src = './processing-1.3.6.js'

$.Processing = function(parent, file){
    var appendScript = function(){
        $('head').append(function(){
            return $('<script></script>').attr('src', src).html('added processing script');
        })
    }

    var appendProcessing = function(){
        $(parent).append(function(){
            var $c = $('<canvas></canvas>');
            var p = Processing.loadSketchFromSources($c, [file])
            return  $c;
        });    
    }

    appendScript();
    appendProcessing();
}
}())

the problem is that the function ´$('head')append has not been called. tested on Chrome

Thanks

gcrav
  • 89
  • 1
  • 3
  • 10

1 Answers1

1

1) Processing.loadSketchFromSources needs a plain createElement object, not a jQuery object. So you need to change this line:

Wrong: var $c = $('<canvas></canvas>');
Correct: var $c = document.createElement('canvas');

If you really need the jQuery object, then you would need to get the pure createElement from the jQuery object using $c[0] instead of $c, so this would also work:
var p = Processing.loadSketchFromSources($c[0], [file]);

2) Don't use </script> string inside a script tag because it will end your script:

Wrong: return $('<script></script>')
Correct: return $('<script></scr'+'ipt>')

3) The html inside <script> tag is not needed, since script does not have html code inside it:
HTML not used: $('<script></scr'+'ipt>').attr('src', src).html('added processing script');
Correct: $('<script></scr'+'ipt>').attr('src', src);

This is a page with your full script working correctly (loading and running the external Processing .pde file) if you want to try and see the code:
http://www.js.do/processing-js/gcravista-sample.htm

  • Hi rodrigo! Now works, but I'm not understand the trick about $(' – gcrav Jun 16 '12 at 20:55