0

I have a bit of an odd bug here; I have a simple website (http://davidpuetter.azurewebsites.net/shop.html#) that is supposed to load the JQuery library, and the EasyUI library. The JQuery seems to load just fine, because I have a function to print out "ready" when the page is loaded. What the intended function is, is that I can drag each product seen there onto the shopping cart to the right. This works perfectly fine if I run the html files manually from my computer, but not since it has been hosted.

What's happening here?
Thanks for any help

davidpox
  • 135
  • 1
  • 5
  • 18
  • Are you seeing any loading errors in the browser network tab? – deborah-digges Dec 31 '15 at 17:21
  • No, none. Console doesn't give any errors, network tab says 200 OK to the file – davidpox Dec 31 '15 at 17:24
  • Have you checked to make sure your hosting didn't apply some sort of compiler or filter to the page (just make sure all of your code looks like it should html and js source files)? I don't know that that's the case it's just something to check. – Binvention Dec 31 '15 at 17:28
  • Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Dec 31 '15 at 17:28

2 Answers2

2

On line 7 in scripts/shop.js you are calling $("#shop").load("shopcontent/cat1.html");, but it has not loaded yet when you run $(".item").draggable({ on line 27.

When that lines is executed there are no elements with the class item in the document.

My guess is that $("#shop").load(.. is synchronous when running in file://. It is obviously not synchronous when loading over the wire.

You should wait for .load to complete (callback) before you call .draggable. See docs.

MiniGod
  • 3,683
  • 1
  • 26
  • 27
  • It wouldn't be synchronous it's just the local host is fast enough that it doesn't matter – Binvention Dec 31 '15 at 17:30
  • I see, thank you. What would the best approach for me to make sure my content gets loaded before the script gets executed? – davidpox Dec 31 '15 at 17:46
  • This question was marked as a duplicate, so check out the previous answer. – GAntoine Dec 31 '15 at 17:52
  • Okay I had a read through it, but I'm finding it somewhat hard to understand the syntax of the `.on()` function. I'm not sure how to get it to work with the `draggable` function, because it's not a native JQuery function. I've tried doing `$('body').on('draggable', '.item', function() { //old function in here });`, but that doesn't work (console says that it doesnt recognize the `:`.) – davidpox Dec 31 '15 at 19:13
  • You can wait for the callback of `.load` before you call `.draggable`. I updated the answer. – MiniGod Jan 02 '16 at 15:10
0

I think I found your problem. If you break at line 27 in shop.js, reload the page and check the value of $(".item") in the console, you'll find that it returns an empty array. You're going to have to initialize the items before calling draggable on them.

GAntoine
  • 1,265
  • 2
  • 16
  • 28