CODEWITHSUNDEEP
jquerywordpressjquery-ui
Sam Johnson
Sam Johnson

Reputation: 783

jQuery(...).draggable is not a function

I'm creating a map with an image, using the help I found on a previous SO question.

While the fix using jQuery UI works fine in JS Fiddle, it doesn't work when I try it on my actual site. Instead, what I get is 

jQuery.Deferred exception: jQuery(...).draggable is not a function
TypeError: jQuery(...).draggable is not a function

I'm literally taking the contents of that JS Fiddle and adding it to my site, so presumably the issue lies with how I'm linking to the jQuery/jQuery UI file.

EDIT: I've updated the jQuery links to exactly match the versions used in the JSfiddle above.

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

This has already been asked and answered in another thread, but the question references jQuery Tools, which I don't believe I'm using.

EDIT 2: I'm able to recreate the map on a blank HTML file, so I'm wondering whether it's something to do with my current website set up. I'm using Wordpress, but am unaware of any WP/jQuery UI specific issues.

Upvotes: 0

Views: 9182

Answers (2)

Sam Johnson
Sam Johnson

Reputation: 783

I've found that the issue was that I was simply linking to jQuery UI normally as I would on a website without a CMS. However, with the site being built on Wordpress, I should have been enqueueing the script properly.

Wordpress topic on how to do this: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Though for simplicity during this stage of the build, and to clarify that it works, I used this plugin: https://wordpress.org/plugins/enqueue-me/

Upvotes: 2

Darshit Hedpara
Darshit Hedpara

Reputation: 670

jQuery(document).ready(function() {
    jQuery("#map").draggable(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="range">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/127459-200.png" id="map" />
</div>

Try This

This issue will also occur if you don't load jqueryui according to jquery version

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Upvotes: 2

Related Questions