Uncaught TypeError: .draggable is not a function(…)

Question

I don't know what is wrong here, it has already driven me nuts. Whenever I use some breakpoints on the code, as in the image, and reload the page then everything works fine. But if I close the developer tools and then I refresh, it throws me this error: 'Uncaught TypeError: $design[a].draggable is not a function(…)'.

Following is my code and the images:

Debugging image:

My script:

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var $canvas = $("#canvas");
    var canvasOffset = $canvas.offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;

    var design = [];
    var $design = [];
    var pic = [];

    $.ajax({
      type: 'get',
      url: ('/getCustomizeParts'),
      data: {
      },
      success: function(data) {
        for (var a = 0; a < data.length; a++) {
          design[a] = new Image();
          pic[a] = data[a].partimagePath;
          design[a].src = "images/part/" + pic[a];
          $design[a] = $("#design" + (a + 1));
          //here it threows me the error
          $design[a].draggable({
            helper: 'clone',
          });
          $design[a].data("image", design[a]);
        }
        $canvas.droppable({
          drop: dragDrop,
        });
      }
    });

I have included the script tags in my page in following order

<script src="/Admin/js/jquery-2.2.3.min.js"></script>
<script src="/Admin/js/jquery-ui.min.js"></script>
<script src="/Admin/js/customizeScript.js"></script>

Answer 1

Try adding the defer attribute to your script link as following:

<script src="/Admin/js/customizeScript.js" defer></script>
// or this for XHTML
<script src="/Admin/js/customizeScript.js" defer="defer"></script>

see this w3school page for more info about the defer attribute

Answer 2

It is most likely caused because your page has not completed loading yet, so one of your js files isn't there yet, try running your code after the document gets ready.

You can do that by adding your code to the $(document).ready function, one of the ways to do that is as following:

$(document).ready(function() {
   // your code here
})