TypeError: undefined is not a function (for JQuery Sortables)

Question

I am creating an HTML UI where there are "rooms" and you can place devices in these rooms. I use JQuery Sortable widget. I use this code to setup my sortables:

function setupSortables() {
        $(".sortableHorizontal")
        .sortable({
            connectWith: ".sortableHorizontal",
            cancel: ".unsortable",
            revert: animationSpeed,
            "placeholder": 'sortPlaceholder',  
            "opacity": 0.5,
                "start": function (event, ui) {
                    var $item = ui.item;
                    $(".sortPlaceholder").css({
                        "margin-top": $(".deviceContainer").css("margin-top"),
                        "margin-left": $(".deviceContainer").css("margin-left"),
                        "height": $(".deviceContainer").height() - ($(".sortPlaceholder").css("border-width").replace(/[^-\d\.]/g, '') * 2) + "px",
                    });
                },  
                "stop": function(event, ui) {
                        //alert(ui.item.parent().attr("id"));
                    updateRoomDimensions();
                    relocateSmarthomeObject(ui.item);
                }
        })
        .disableSelection()
        .css({
            "min-height": $(".deviceContainer").outerHeight(true),
            "min-width": $(".deviceContainer").outerWidth(true),
            "padding-right": "15px"
        });
    }

I call this method on $(document).ready() since I already have preexisting rooms. But when I create a new room using this code:

function createRoom() {
        var roomName = $("#roomCreator").find("#name").val();
        var roomColor = $("#roomCreator").find("#color").text();
        $.get("/devices/createRoom", {
            "name": roomName,
            "color": roomColor
        }, function(data, status) {
            $("#notif").html(data);
            $("#responses").html(data);

            var ssid = $("#responses").find("#SSID").val();
            if(ssid != null) {
                var html = "\
                    <li id='" + ssid + "' class='root_sortItem'> \
                        <div class='invisible'> \
                            <div class='invisible roomContainerContainer'> \
                                <div id='r_" + ssid + "' class='roomContainer' style='background-color:" + roomColor + ";'> \
                                    <div id='r_" + ssid + "_nameContainer' class='textBigBold roomHeader'> \
                                        <span id='r_" + ssid + "_name'>" + roomName + "</span> \
                                        <div class='overlay'> \
                                            <img class='move'/> \
                                            <img class='edit'/> \
                                        </div> \
                                    </div> \
                                    <ul id='" + ssid + "' class='sortableHorizontal room_sort' style='width:165px; height:198px; border:solid 1px blue;'> \
                                    </ul> \
                                </div> \
                            </div> \
                        </div> \
                    </li> ";
                var $html = $(html);
                $("#root_sort").append($html);
                $(document).ready(function() {
                    setupSortables();
                });
            }
        });
        closeRoomCreator();
    }

And call the first setupSortables() method, it returns:

TypeError: undefined is not a function (near '...$(".sortableHorizontal")
        .sortable...')

What am I doing wrong?

Answer 1

I would advise updating to using jQuery objects instead of HTML strings.

Example: https://jsfiddle.net/Twisty/pto4bke0/3/

JavaScript

var animationSpeed = "fast";

function setupSortables() {
  $(".sortableHorizontal")
    .sortable({
      connectWith: ".sortableHorizontal",
      cancel: ".unsortable",
      revert: animationSpeed,
      placeholder: 'sortPlaceholder',
      opacity: 0.5,
      start: function(event, ui) {
        var $item = ui.item;
        $(".sortPlaceholder").css({
          "margin-top": $(".deviceContainer").css("margin-top"),
          "margin-left": $(".deviceContainer").css("margin-left"),
          "height": $(".deviceContainer").height() - ($(".sortPlaceholder").css("border-width").replace(/[^-\d\.]/g, '') * 2) + "px",
        });
      },
      "stop": function(event, ui) {
        //alert(ui.item.parent().attr("id"));
        //updateRoomDimensions();
        //relocateSmarthomeObject(ui.item);
      }
    })
    .disableSelection()
    .css({
      "min-height": $(".deviceContainer").outerHeight(true),
      "min-width": $(".deviceContainer").outerWidth(true),
      "padding-right": "15px"
    });
}

function createRoom() {
  var roomName = $("#roomCreator").find("#name").val();
  var roomColor = $("#roomCreator").find("#color").val();

  var ssid = 1000 + $(".root_sortItem").length;
  if (ssid != null) {
    var $li = $("<li>", {
      id: ssid,
      class: "root_sortItem"
    });
    $("<div>", {
      class: "invisible"
    }).appendTo($li);
    $("<div>", {
      class: "invisible roomContainerContainer"
    }).appendTo($li.find(".invisible"));
    $("<div>", {
      id: "r_" + ssid,
      class: "roomContainer",
      style: "background-color: " + roomColor + ";"
    }).appendTo($li.find(".roomContainerContainer"));
    $("<div>", {
      id: "r_" + ssid + "_nameContainer",
      class: "textBigGold roomHeader"
    }).appendTo($li.find(".roomContainer"));
    $("<span>", {
      id: "r_" + ssid + "_name"
    }).html(roomName).appendTo($li.find(".roomHeader"));
    $("<div>", {
      class: "overlay"
    }).appendTo($li.find(".roomHeader"));
    $("<img>", {
      class: "move"
    }).appendTo($li.find(".overlay"));
    $("<img>", {
      class: "edit"
    }).appendTo($li.find(".overlay"));
    $("<ul>", {
      id: "rs_" + ssid,
      class: "sortableHorizontal room_sort",
      style: "width:165px; height:198px; border:solid 1px blue;"
    }).appendTo($li.find(".roomContainer"));
    $("#root .sortableHorizontal").eq(0).append($li);
  }
}

$(function() {
  setupSortables();
  $("#createRoomBtn").click(createRoom);
});

I had to take some guesses as you did not provide a very complete example.