(rewriting the question now that it's more specific)

I had a sortable list working perfectly while I had manual 'li' items created. Then, I stopped creating the items manually since they should e from the server side. But once I started populating the li items through jquery, the sorting function stopped working.

<section>
    <div class="taskcontainer">
        <h1>alpha</h1>
        <ul id="sortable1" class="connected sortable list">
<!-- <li class="list-group-item">This worked perfectly before</li> -->
        </ul>
    </div>      
</section>

<script>
$('.sortable').sortable();

$(function() {                       //run when the DOM is ready
  $(".list-group-item").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("pleted");      //add the class to the clicked element
  });
});

</script>

<script>
function getTasks()
{
    var jsontasks = jQuery.parseJSON('<%=raw(@jsontasks)%>');
    $.each(jsontasks, function(index, element) {
        $("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");

    }); 

    $('.sortable').sortable();

}   
</script>

Now, when I run the getTasks function, the li items get populated correctly. But the sortable function can't fire. Browser returns an error:

Uncaught TypeError: undefined is not a function

Somehow the sortable feature is not accessible from within the getTasks function.

Here is the full code:

Thanks

(rewriting the question now that it's more specific)

I had a sortable list working perfectly while I had manual 'li' items created. Then, I stopped creating the items manually since they should e from the server side. But once I started populating the li items through jquery, the sorting function stopped working.

<section>
    <div class="taskcontainer">
        <h1>alpha</h1>
        <ul id="sortable1" class="connected sortable list">
<!-- <li class="list-group-item">This worked perfectly before</li> -->
        </ul>
    </div>      
</section>

<script>
$('.sortable').sortable();

$(function() {                       //run when the DOM is ready
  $(".list-group-item").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("pleted");      //add the class to the clicked element
  });
});

</script>

<script>
function getTasks()
{
    var jsontasks = jQuery.parseJSON('<%=raw(@jsontasks)%>');
    $.each(jsontasks, function(index, element) {
        $("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");

    }); 

    $('.sortable').sortable();

}   
</script>

Now, when I run the getTasks function, the li items get populated correctly. But the sortable function can't fire. Browser returns an error:

Uncaught TypeError: undefined is not a function

Somehow the sortable feature is not accessible from within the getTasks function.

Here is the full code: http://pastebin./wbdNLC9f

Thanks

• javascript
• jquery

• where are you call getTasks() function ? you should call sortable() after inserting all data to your list.(it's better to call end of getTasks()) – Reza-S4 Commented Apr 12, 2015 at 18:28
• I call getTasks from a button click. I've done it and it doesn't work. – Luis Novo Commented Apr 13, 2015 at 12:57
• try something like this : var sel = $(".sortable"); function getTasks() { ... sel.sortable(); ... } – Reza-S4 Commented Apr 13, 2015 at 20:18
• same error.. didn't change a thing. – Luis Novo Commented Apr 14, 2015 at 2:32
• somehow it can't see the $('.sortable').sortable(); function from within the button click function. – Luis Novo Commented Apr 14, 2015 at 2:49

2 Answers 2

I can only suggest that you need to update your jQuery UI code. Similar code works:

$('.sortable').sortable();

function getTasks() {
    var jsontasks = {
        "name1": { name: "geoff"},
        "name2": { name: "mark"},
        "name3": { name: "lucy"},
        "name4": { name: "richard"},
        "name5": { name: "amelia"},
        "name6": { name: "james"},
        "name7": { name: "ronald"}
    }
    $.each(jsontasks, function (index, element) {
        $("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");

    });

    $('.sortable').sortable();

}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis./ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<section>
  <div class="taskcontainer">
    <h1>alpha</h1>

    <ul id="sortable1" class="connected sortable list"></ul>
  </div>
  <button onclick="getTasks();">Sortable</button>
</section>

As the code snippet seems to be broken in Google Chrome (seems to be a Stack Overflow problem, works in Firefox though), here's the Fiddle I used to test this.

Try to call sortable after you add all elements to list.