Display jquery UI dialog after click on a bonsaijs shape

Question

Hello I have this code

$(function() {
  bonsai.run(document.getElementById('movie'), {
   code: function() {
     var rect= new Rect(0, 0, 100, 100);
     rect.on('multi:pointerdown', function(e) {
     $("#dialog-form").dialog("open");
     });
   },
   width: 500,
   height: 400,
  });
});

When I click on my rect I have this error :

ReferenceError: $ is not defined

How can I get a reference on jquery ?

Answer 1

• Make sure $ variable is not over-written by Jquery variable in the core of jquery.

• The order in which the script is loaded is important, run script after jQuery loads.

Answer 2

Maybe you are calling that function before the JQuery Javascript is included? Put the references to the JQuery scripts first.

Answer 3

BonsaiJS creates a new execution context (often a web worker) and the code you pass within bonsai.run is executed in a different scope, where jQuery isn't available. Details about how BonsaiJS executes code can be found here.

But to solve your problem you can communicate with the so-called BonsaiJS runner context like that:

$(function() {
  var movie = bonsai.run(document.getElementById('movie'), {
    // note: this function will be stringified and sent to the runner context
    code: function() {
      var rect= new Rect(0, 0, 100, 100).fill('red').addTo(stage);
      rect.on('multi:pointerdown', function(e) {
        // this is how you would pass data with your message
        stage.sendMessage('openDialog', {
          id: '#dialog-form'
        });
        // no data:
        // stage.sendMessage('openDialog', {});
      });
    },
    width: 500,
    height: 400,
  });
  movie.on('load', function() {
    movie.on('message:openDialog', function(data) {
      $(data.id).dialog("open");
    });
  });
});