Django Jquery TypeError: $(...).draggable is not a function

Question

I have a Django application with Jquery being used on the frontend, however some Jquery functions are not working. The code works as expected outside of a Django application when the HTML/CSS is run separately.

I have included the Jquery and javascript like this:

<script language="JavaScript" type="text/javascript" src="{% static 'blog/static/jquery-3.2.1.min.js'%}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'blog/static/mememaker.js'%}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'blog/static/main.js'%}"></script> 

Here is my javascript file

$(document).ready(function () {
  console.log("mememaker working!");

  //setting default font 

  var fontSize = "24px";
  var sizeNumber = 24;
  var fontFamily = "Arial";
  var fontColour = "Black"

  //Choose meme picture

  $('#fry').click(function () {
    console.log("add fry")
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/Fry.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  $('#spongebob').click(function () {
    console.log("spongebob")
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/Spongebob.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  $('#leow').click(function () {
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/LeoW.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  //Upload function



  //Textbox area


  //Preview function
  $('.btn-prvw').click(function () {
    $('#meme-canvas-container').css({
      'display': 'block'
    });
  });
  //Close the preview
  $('.btn-close').click(function () {
    $("#meme-canvas-container").css({
      'display': 'none'
    });
  });

  //Canvas

  function copyToCanvas(htmlElement, font) {
    var canvas = document.getElementById("meme-preview");
    var ctx = canvas.getContext("2d");

    // ctx.font = font;
    // ctx.fillText(text, 10, 10);

    image = new Image(0, 0);
    image.onload = function () {
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;

      var top = 0;
      var left = 0;
      var cellspace = 0;
      var memeTargetWidth = $("#meme-bg-target").width();
      var memeTargetHeight = $("#meme-bg-target").height();

      //Draw font onto canvas

      ctx.drawImage(this, 0, 0);

      $(".meme-txt-area").each(function () {

        cellspace = parseInt($(this).css("padding"));
        left = parseInt($(this).css("left")) + cellspace;
        top = parseInt($(this).css("top")) + 4.5 * cellspace;
        ctx.font = font;
        ctx.fillStyle = fontColour;
        ctx.strokeStyle = 'black'; //adding border to text
        ctx.fillText($(this).text(), left, top);
        ctx.strokeText($(this).text(), left, top);
      });
    };


    //Retreiving image for canvas    

    image.src = $("#img-meme-bg").attr("src");
  }

  //Display font on canvas 

  $(document).ready(function (e) {
    $(".btn-prvw").on('click', function () {
      var font = sizeNumber.toString() + "px" + " " + fontFamily;
      console.log(font);
      copyToCanvas($('#meme-bg-target'));
      copyToCanvas($('.meme-txt-area'), font);
    });

  });
});

function createTextArea() {
  console.log("working")
  //Impact font 
  var txtAreaHTML = "<div contentEditable='true' class='meme-txt-area'></div>";
  $("#meme-bg-target").append(txtAreaHTML);
  $(".meme-txt-area").draggable({
    containment: "#meme-bg-target",
  });
  $(".meme-txt-area").focus();
  $("#btn-fnt").click(function () {
    $(".meme-txt-area").css('color', 'white');
    $(".meme-txt-area").css('font-family', 'impact');
    $(".meme-txt-area").css('text-shadow', '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black');
    $(".meme-txt-area").css('font-size', '24px');
    fontFamily = "Impact";
    fontColour = "White";
  });
  //Arial font
  var txtAreaHTML = "<div contentEditable='true' class='meme-txt-area'></div>";
  $("#meme-bg-target").append(txtAreaHTML);
  $(".meme-txt-area").draggable({
    containment: "#meme-bg-target",
  });
  $(".meme-txt-area").focus();
  $("#btn-fntA").click(function () {
    $(".meme-txt-area").css('color', 'black');
    $(".meme-txt-area").css('font-family', 'arial');
    $(".meme-txt-area").css('font-size', '24px');
    $(".meme-txt-area").css('text-shadow', 'none');
    fontFamily = "Arial";
    fontColour = "Black";
  });
  //Changing the size of the text
  $('.btn-fi').click(function () {
    $('.meme-txt-area').css({
      'font-size': '+=2'
    });
    sizeNumber += 2;
  });
  $('.btn-fd').click(function () {
    $('.meme-txt-area').css({
      'font-size': '-=2'
    });
    sizeNumber -= 2;
  });

  //Clear function
  $('.btn-clr').click(function () {
    $('.meme-txt-area').remove();
  });

}

function showPreview(objFileInput) {
  if (objFileInput.files[0]) {
    var fileReader = new FileReader();
    fileReader.onload = function (e) {
      $("#meme-bg-target img").attr('src', e.target.result);
    }
    fileReader.readAsDataURL(objFileInput.files[0]);
  }

  //Setting size of the meme to be the same as the default memebox

  $('#meme-bg-target img').width(550); // Units are assumed to be pixels
  $('#meme-bg-target img').height(420);
}

When using the function which calls createTextArea(), this error comes up in the Javascript console

Uncaught TypeError: $(...).draggable is not a function
    at createTextArea (mememaker.js:127)
    at HTMLButtonElement.onclick ((index):141)

Any help would really be appreciated

Answer 1

Because draggable is JqueryUI component you first have to link the css and js to file you are using .

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

and this js after jquery main js

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