Untitled

<!DOCTYPE html>
<html>
<head>
  <title>AsanaPlay</title>
  <link data-turbolinks-track="true" href="/assets/common.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/loader.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/reset.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sortable_list.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/test.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.sortable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.sortable.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/test.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="jvHurbVSA8BYyRtfjSYPTDxphyFuDw7h8rfu87E+HSc=" name="csrf-token" />

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

</head>
<body>

<div class="container">

<input type="button" id="btTasks" value="Click me" />

    <section>
        <div class="taskcontainer">
            <h1>alpha</h1>
            <ul id="sortable1" class="connected sortable list">
                <li class="list-group-item, highlight">Item 1</li>

            </ul>
        </div>

    </section>


<script>
  $('.sortable').sortable(); // this used to work when li items where created manually (server-side)
</script>

<script>
    $('#btTasks').click(function() {
        var jsontasks = jQuery.parseJSON('[{"id":28226705490203,"name":"This is one task","assignee_status":"today","order":null},{"id":26402095585056,"name":"This is another","assignee_status":"today","order":null},{"id":31091936404599,"name":"This is yet another","assignee_status":"today","order":null}]');
        $.each(jsontasks, function(index, element) {
            $("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");
        });

        $('.sortable').sortable(); //this doesn't work

    });
</script>

</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


</body>
</html>