Menu
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.
681
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.
166
You are trying to get elements which are not created yet. Place your script at the end of <body> or use $(document).ready();
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
