jquery stops working when using document ready statement

Question

So my code has been working fine. However, as soon as I place an on document ready statement the entire script stops working. I have tried placing an alert within the document ready function and it passes properly.

I'm really uncertain what the problem is, and how I would go about debugging. Any advice would be greatly appreciated

JS code

$(document).ready(function() {
    $("#sample").effect("transfer", {
        to: $("#{{ $stimuli['sample'][0] }}")
    }, 7000, function() {

      $('#{{$stimuli['sample'][0]}}')
        .append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');

      $('#{{$stimuli['sample'][0]}}').css("border", "10px solid green");
    });

});

Some console messages:

    'webkitIndexedDB' is deprecated. Please use 'indexedDB' instead.
firebug-lite.js:15683 'Performance.onwebkitresourcetimingbufferfull' is deprecated. Please use 'Performance.onresourcetimingbufferfull' instead.
http://getfirebug.com/releases/lite/skin/xp/pixel_transparent.gif Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/public/assets/css/media-queries.css Failed to load resource: the server responded with a status of 404 (Not Found)

NEW UPDATE Was missing a few errors.

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/task/matching/js/init.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/public/assets/css/media-queries.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/task/matching/js/modernizr.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/task/matching/js/jquery-migrate-1.2.1.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/task/matching/js/jquery.flexslider.js Failed to load resource: the server responded with a status of 404 (Not Found)
active:94 Uncaught TypeError: $(...).effect is not a function
firebug-lite.js:11883 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
chrome-extension://bmagokdooijbeehmkpknfglimnifench/firebug-lite.js Failed to load resource: the server responded with a status of 404 (Not Found)fetchResource @ firebug-lite.js:11884
firebug-lite.js:30396 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
firebug-lite.js:30396 'webkitIndexedDB' is deprecated. Please use 'indexedDB' instead.
firebug-lite.js:15683 'Performance.onwebkitresourcetimingbufferfull' is deprecated. Please use 'Performance.onresourcetimingbufferfull' instead.
http://getfirebug.com/releases/lite/skin/xp/pixel_transparent.gif Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/pp/public/public/assets/css/media-queries.css Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

If any of your HTML is being dynamically created you should use the .on instead of the standard .ready , Im not sure if this will fix your problem as I'm not 100% what's going wrong as you've provided very minimal information.

Also make sure that your <script src='jquery.js'></script> is at the bottom of the html page. This ensures that the html loads first and then the javascript. Below is an example of the .on('ready')

$(document).on('ready', function() {
   // Put your code in here
});

Edit:

Okay I think I may know your issue, make sure that your JQUERY UI script is being attached to the document AFTER your JQUERY . So for example it should look something like this:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="YOUR_CUSTOM_SCRIPT_.JS"></script> <!-- Put your document.ready function here -->