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

Question

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.

if your website is published via HTTPS use only HTTPS reference to external assets (script, css, ...). You have jquery via HTTPS and jquery-ui via HTTP — beaver, Dec 19 '17 at 11:15
@beaver thanks, the site is actually stored locally using MAMP at the moment. But other elements requiring jQuery are functioning correctly. — Sam Johnson, Dec 19 '17 at 11:18
@beaver yeah, jQuery first immediately followed by jQuery UI. Then bootstrap etc... — Sam Johnson, Dec 19 '17 at 11:29
I think your website has more that `jquery.js` or `jquery-ui.js` (or `min.js`) and including `jQuery` twice causes this issue. Check in the browser your js files. — Ali Soltani, Dec 19 '17 at 12:00
@AliSoltani You're saying jQuery UI also includes the jQuery file? At the moment if I delete the link to jQuery the other functionality fails (while the map continues to not work). — Sam Johnson, Dec 19 '17 at 12:11
No I think `.js` files related to `.draggable` are loaded twice. — Ali Soltani, Dec 19 '17 at 12:37
@alisoltani Thanks for your help with this. I actually found that the issue was because I wasn't enqueueing the scripts as is recommended with Wordpress. — Sam Johnson, Dec 19 '17 at 12:42

Darshit Hedpara · Answer 1 · 2017-12-19T11:42:45.300

2

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>

edited Dec 19 '17 at 11:42

answered Dec 19 '17 at 11:36

Darshit Hedpara

660
6
17

Thanks, but this hasn't worked for me. I've updated the question to highlight that I've now changed the jQuery and jQuery UI versions to exactly replicate the JSFiddle, as we know that works. But I still can't replicate it. – Sam Johnson Dec 19 '17 at 11:41
Thanks for your continued efforts. While I appreciate you recreating it, it still isn't working when I try to implement it on my page. – Sam Johnson Dec 19 '17 at 12:00
`TypeError: jQuery(...).draggable is not a function` – Sam Johnson Dec 19 '17 at 12:02
Please could you explain what you mean by that, isn't that what we already have? – Sam Johnson Dec 19 '17 at 12:09

score 2 · Accepted Answer · answered Dec 19 '17 at 12:41

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/

Thanks having added proper tag "wordpress", which is really important in this case — beaver, Dec 19 '17 at 12:43

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

2 Answers2