Jquery not loading in jsFiddle

Question

I am trying to use jQuery-ui's drag and drop with angular js for a list of accordions ... However my drag and drop doesn work in jsFiddle ( works in local server) as firebug states that : ReferenceError: jQuery is not defined .

Here is the jsFiddle

               <!DOCTYPE html>
<html ng-app="App">

<title>Task WhiteBoard</title>
<head>
<meta charset="utf-8" />     
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
<title>Angular Drag and Drop</title>
</head>


<body ng-controller="dndCtrl" ng-cloak>
<h3>Task Whiteboard</h3>


<div class='list1' droppable value='1' >    

<div class='header'>
    Free Tasks
</div>

<div class="below-header">

</div>

<div  ng-repeat="item in list1" data-index="{{$index}}" draggable>
    <div class="zippy" zippy-title="{{item.name}}">
            {{item.content.newLabel}}    <br/>
            {{item.content.desc}}    <br/>
            {{item.content.effort}}    <br/>
            {{item.content.owner}}    <br/>
            {{item.content.issues}}    <br/>    
            {{item.content.comments}}    <br/>
            {{item.content.dependency}}    <br/>
    </div>    
</div>    
</div>    

<div class='list2' droppable value='2'>    

<div class='header'>
    Claimed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list2" data-index="{{$index}}" draggable>
    <div class="zippy" zippy-title="{{item.name}}">
            {{item.content.newLabel}}    <br/>
            {{item.content.desc}}    <br/>
            {{item.content.effort}}    <br/>
            {{item.content.owner}}    <br/>
            {{item.content.issues}}    <br/>    
            {{item.content.comments}}    <br/>
            {{item.content.dependency}}    <br/>
    </div>    
</div>    
</div>

<div class='list3' droppable value='3'>

<div class='header'>
    Completed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list3" data-index="{{$index}}" draggable>
        <div class="zippy" zippy-title="{{item.name}}">
            {{item.content.newLabel}}    <br/>
            {{item.content.desc}}    <br/>
            {{item.content.effort}}    <br/>
            {{item.content.owner}}    <br/>
            {{item.content.issues}}    <br/>    
            {{item.content.comments}}    <br/>
            {{item.content.dependency}}    <br/>
        </div>    
</div>
</div>    


<div style="clear:both;">
    list 1 size : {{list1.length}}    <br/>
    list 2 size : {{list2.length}}    <br/>
    list 3 size : {{list3.length}}    <br/>
</div>
</body>
</html>

You may not have selected the jQuery for it on fiddle, check it over here, jsfiddle.net/rajaadil/TTrdm/60 — Adil
– Adil, Commented Jan 2, 2013 at 5:46
@Adil: if you look at the manage resources, I think he has already added jquery. — defau1t
– defau1t, Commented Jan 2, 2013 at 6:59

Pranav · Accepted Answer · 2013-01-02 05:52:08Z

1

Take A look on the Left Panel of JSFiddle, there you have selected Pure JS, if you want to use Jquery UI then choose jquery version 1.7.2 and check the checkBox jquery UI 1.8.18 which is below that.

answered Jan 2, 2013 at 5:52

Pranav

8,9214 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Levi · Accepted Answer · 2013-01-02 06:00:06Z

0

Your managed resources are out of order. You need to reorder them with jquery first, then jquery ui, etc. That will solve the JS error that jQuery is undefined.

edited Jan 2, 2013 at 6:00

answered Jan 2, 2013 at 5:48

Levi

2,11314 silver badges10 bronze badges

3 Comments

Adithya Over a year ago

Thanks :) that worked ... but now my drag and drop functionalities arent working as angular js framework isnt active maybe

Levi Over a year ago

This jsFiddle seems to work. I don't see anything that makes a difference between it and yours.

Adithya Over a year ago

I didn use services in my script ... that seems to be the only diference :) ...thanks i will look through it :)

Collectives™ on Stack Overflow

Jquery not loading in jsFiddle

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related