jsPlumb is not defined

2,287 views
Skip to first unread message

simon

unread,
Jun 27, 2012, 3:30:45 AM6/27/12
to jsp...@googlegroups.com
Hi,

I was hoping to have a play around with jsPlumb (it looks great fun), but I can't get it to work. I get the error "jsPlumb is not defined", pointing to the first line of the script where I refer to jsPlumb.

I've worked from these examples:

http://fishfilosophy.blogspot.co.uk/2011/12/how-to-connect-gwt-widgets-using.html
http://michelanders.blogspot.co.uk/2011/05/visualizing-python-call-graphs-with.html

I'm using Firefox 13.

Is there something I'm missing? Are there any other complete examples I can download and see working, and then tweak?

Thanks,

Simon

acharya

unread,
Jun 27, 2012, 10:12:16 AM6/27/12
to jsp...@googlegroups.com
Have you included the jquery.jsPlumb-version-x.x.x.js  file?

Can you post minimal code required to see the issue?

simon

unread,
Jun 27, 2012, 1:06:10 PM6/27/12
to jsp...@googlegroups.com
Yep, I have jquery.jsPlumb-1.3.10-all.js in my js folder. (Have also tried the min version.)

Here's the html with embedded script:


<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all.js"></script>
<link rel="stylesheet" href="stylesheets/jsPlumb.css" type="text/css" media="all" />
</head><body>
<div id="A" class="box" style="left:200px;top:200px">A-end</div>
<div id="B" class="box" style="left:200px;top:400px">B-end</div>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
});

var e0 = jsPlumb.addEndpoint("i"),
    e1 = jsPlumb.addEndpoint("h");

jsPlumb.importDefaults({
  Connector : [ "Bezier", { curviness: 150 } ],
  Anchors : [ "TopCenter", "BottomCenter" ]
});

jsPlumb.connect({ source:e0, target:e1 });
</script>
</body>
</html>

acharya

unread,
Jun 27, 2012, 1:10:23 PM6/27/12
to jsp...@googlegroups.com
Access jsPlumb inside ready function. My guess is that jsPlumb is being accessed before the ready funtion is called.

jsPlumb.ready(function() {

simon

unread,
Jun 27, 2012, 1:20:42 PM6/27/12
to jsp...@googlegroups.com
Tried that, no joy.

The error I get is on line 10 i.e. the jsPlumb.ready(function() { line.

acharya

unread,
Jun 27, 2012, 1:31:44 PM6/27/12
to jsp...@googlegroups.com
script block should go inside head. You have it in the <body> </body>

acharya

unread,
Jun 27, 2012, 1:32:42 PM6/27/12
to jsp...@googlegroups.com
Sorry, it can go inside body too !!

Simon Porritt

unread,
Jun 27, 2012, 5:03:52 PM6/27/12
to jsp...@googlegroups.com
If the jsPlumb script is indeed inside the 'js' folder I can see no reason for that setup telling you jsPlumb doesn't exist.  The addEndpoint calls you've got there won't work, though, since you're trying to add Endpoints to "i" and "j" when your divs have ids "A" and "B".

This is a copy of your html that I ran inside a folder that had a js child folder with the jsPlumb script in it, and this works for me:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all.js"></script>
<style type="text/css">
.box { width:3em; height:3em; position:absolute; border:1px solid black;z-index:10;}
._jsPlumb_connector { z-index:9;}
</style>
</head>
<body>
<div id="A" class="box" style="left:200px;top:200px">A-end</div>
<div id="B" class="box" style="left:200px;top:400px">B-end</div>
<script type="text/javascript">
jsPlumb.bind("ready", function() {

var e0 = jsPlumb.addEndpoint("A"),
    e1 = jsPlumb.addEndpoint("B");

jsPlumb.importDefaults({
  Connector : [ "Bezier", { curviness: 150 } ],
  Anchors : [ "TopCenter", "BottomCenter" ]
});

jsPlumb.connect({ source:e0, target:e1 });

jsPlumb.draggable($(".box"));

});
</script>
</body>
</html>


Note that you really do need to put the jsPlumb code inside a 'ready' callback.  Your html has a ready callback but nothing inside of it (although I know that's not actually your problem).

Where did you get the jsPlumb file from?

simon

unread,
Jun 27, 2012, 5:39:55 PM6/27/12
to jsp...@googlegroups.com
I tried the html you provided, but same error message.

The jsPlumb file I downloaded from: http://code.google.com/p/jsplumb/downloads/list

Simon Porritt

unread,
Jun 27, 2012, 6:07:13 PM6/27/12
to jsp...@googlegroups.com
have you tried other browsers?  do you see errors in the console?  if you put the URL to the js file into your address bar can your browser load it?

ashwin acharya puthige

unread,
Jun 27, 2012, 6:07:41 PM6/27/12
to jsp...@googlegroups.com
Is  jquery  loading properly ?

simon

unread,
Jun 28, 2012, 2:27:01 AM6/28/12
to jsp...@googlegroups.com
Worked it out. My good friend windows had added a .txt extention to the end of the javascript file, but I had the "show known extensions option" turned off, so I couldn't see in Windows Explorer that the extention was there (just showed up as .js).

Now working fine. Which is good as jsPlumb looks great fun to play with!

Thanks for all your help.
Reply all
Reply to author
Forward
0 new messages