Type Error i is undefined

Question

Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>

</head>
<body>
<div id="header">Sprite Generator</div>

<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>

This is the code I use. Kindly help, am not aware what is going wrong here.

Do you have a jsFiddle we can review? Or any info about the error? Maybe a webpage we can check if it's too complex for fiddle? — Charlie74, Oct 23 '13 at 12:54
@Charlie74 If you render this page itself you will see errors in console — AmGates, Oct 24 '13 at 13:22
@ Patsy Issa If I use the collision.min.js and ui-draggable-collision.min.js along with ui.js this error occurs. But if specific ui files like droppable, draggable, etc separately included it executes well. — AmGates, Oct 24 '13 at 13:25

score 3 · Accepted Answer · 2013-10-29T13:01:07.650

The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.

There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").

You should :

Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.

In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.

Thanks! Got it to work with jQuery 1.10.2 & jQuery UI 1.10.3. — Katzumi, Jan 18 '14 at 22:09

score 1 · Answer 2 · answered Oct 28 '13 at 18:20

The README for jQuery UI Draggable Collision reads:

Load jquery-ui-draggable-collision and its dependencies:

<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>

It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.

Its working when I include specific individual files and I did it before posting this question. But my question is why it is not working when including the whole ui.js file ? — AmGates, Oct 29 '13 at 05:56
Likely because there is a conflict. I assume the README suggests doing these separately because there's a conflict somewhere in jquery ui. I'm not sure where, though. — ramblinjan, Oct 29 '13 at 18:13

Type Error i is undefined

2 Answers2