JointJS: Hello World example doesn't work

StackOverflow https://stackoverflow.com/questions/21837604

  •  12-10-2022
  •  | 
  •  

Question

I am always seeing this exception when I try the Hello World example from the JointJS site:

Uncaught TypeError: Cannot call method 'getStrokeBBox' of undefined

Here's the code:

<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="css/joint.css" />
<script src="js/joint.js"></script>
-->


<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css"></link>
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>


<script>
    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 600,
        height: 200,
        model: graph
    });

    var rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
    });

    var rect2 = rect.clone();
    rect2.translate(300);

    var link = new joint.dia.Link({
        source: { id: rect.id },
        target: { id: rect2.id }
    });

    graph.addCells([rect, rect2, link]);
</script>
</head>
<title>Test</title>

<body>
    <div id="myholder"> </div>
</body>
</html>

I saw that there is another question already asked here for the same problem, but the solution given there isn't relevant as I already have a div element for paper object.

Was it helpful?

Solution 

el: $('#myholder'),

Browsers read from top to bottom. The browser is executing this line before it ever finds an element with the id of myholder, so el is an empty jQuery object.

Instead, move your script tag to the bottom of the HTML (so the browser has found myholder before you try to grab it) or wrap it all in a $(document).ready( call.

OTHER TIPS

You are trying to get elements which are not created yet. Place your script at the end of <body> or use $(document).ready();

you are not using jQuery so this will work:

window.onload = function () {   your entire javascript code here };

but better include jQuery.js too and use:

$(function () {  your entire javascript code here  });

The code is executed line by line so it first loads and runs your javascript and doesn't know what "myholder" is. Doing it like I explained above it will load the javascript but it will only execute it once the entire page is loaded.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top