Sortable with jQuery and Ajax

Question

I have data that I am accessing via ajax from a Coldfusion component. I am trying to display the data in a sortable jQuery ui format but the sortable feature is not working. Here is the code I am trying to use.

$(document).ready(function() { 
    // get assets to display
    var showid = <cfoutput>'#SESSION.Show#'</cfoutput>;
    var html = "";

    function assetsPost() {
        $.ajax({
            cache: false,
            type:'POST',
            url:'cfc/cfc_COLF.cfc?method=qCOLF&returnformat=json',
            dataType: "json",
            data: {
              show_id:    showid
            },
            success:function(data) {
                if(data && data.length) {   // DO SOMETHING 

                         html += "<ul id='sortable'>";

                jQuery.each(data, function(i, val) {    
                     var linkID         = data[i].linkID;
                     var description    = data[i].description;
                     var discussion     = data[i].discussion;
                     var linkurl        = data[i].linkurl;
                     var index          = i;
                         html += "<li id=' " + index + " ' class='ui-state-default'>";                  
                         html += "<h5 style='color:#000; text-align:left;'>";
                         html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>";
                         html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>";
                         html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>";
                         html += "</h5>";
                         html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>";
                         html += "</li>";
                });
                         html += "</ul>";

                 $('#linkoutput').html( html );
                 //alert(html);
                } else { // DO SOMETHING 
                }
            }
        });
    }  
    assetsPost(); 
});

$(document).ready(function() { 
        //sort order 
      $(function() {
        $("#sortable").sortable({
            opacity: 0.6,
            update: function(event, ui) {
             var Order = $("#sortable").sortable('toArray').toString();
          $('#order').val(Order);
            //alert(Order);
            }
        });
            $( "#sortable" ).disableSelection();
    });
    // set up sort order for form submission
    $("#mForm").submit(function() {
        $("#order").val($("#sortable").sortable('toArray'))
  });  
});

All the data and the jQuery is loading just fine. In fact, if I added the following code and this list sorts just fine.

<ul id="sortable">
  <li id="1" class="ui-state-default ">
      <h5>1</h5>
  </li>
  <li id="2" class="ui-state-default ">
      <h5>2</h5>
  </li>
  <li id="3" class="ui-state-default ">
      <h5>3</h5>
  </li>
</ul>

HTML UPDATED

Here is the HTML that I am using that isn't working

<form enctype="multipart/form-data"  
  ACTION="page.cfm?#cgi.QUERY_STRING#" 
  id="mForm" 
  method="post">
  <fieldset>
  <div id="linkoutput"></div>

  <label>Order:</label> <input type="text" id="order" />
  <div class="mfInfo"></div>
  </div>

  </fieldset> 
</form>

So there has to be some sort of conflict in the ajax section of code. Any advice is appreciated.

Answer 1

Some of your example code seems to be missing or incorrect. I have reviewed it and created the following example: https://jsfiddle.net/Twisty/hfdg5y20/

HTML

<div class='sort-wrap'>
  <ul id="sortable">
    <li id="1" class="ui-state-default ">
      <h5>1</h5>
    </li>
    <li id="2" class="ui-state-default ">
      <h5>2</h5>
    </li>
    <li id="3" class="ui-state-default ">
      <h5>3</h5>
    </li>
  </ul>
</div>
<label>Order:</label> <input type="text" id="order" />

JQUERY

$(document).ready(function() {
  // get assets to display
  //var showid = < cfoutput > '#SESSION.Show#' < /cfoutput>;
  var showid = 10000000001;
  var html = "";

  function assetsPost() {
    $.ajax({
      cache: false,
      type: 'POST',
      url: '/echo/json/',
      dataType: "json",
      data: {
        show_id: showid,
        json: JSON.stringify([{
          'linkID': 4,
          'description': "stuff",
          'discussion': "thread",
          'linkurl': "http://www.example.com/"
        }])
      },
      success: function(data) {
        console.log(data);
        if (data && data.length) { // DO SOMETHING 

          //html += "<ul id='sortable'>";
          var html = "";

          jQuery.each(data, function(i, val) {
            var linkID = data[i].linkID;
            var description = data[i].description;
            var discussion = data[i].discussion;
            var linkurl = data[i].linkurl;
            var index = $("#sortable li").length + 1;
            html += "<li id='" + index + "' class='ui-state-default'>";
            html += "<h5 style='color:#000; text-align:left;'>";
            html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>";
            html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>";
            html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>";
            html += "</h5>";
            html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>";
            html += "</li>";
          });
          //html += "</ul>";
          console.log(html);

          $('#sortable').append(html);
          $("#order").val($("#sortable").sortable('toArray'));
          //alert(html);
        } else { // DO SOMETHING 
        }
      }
    });
  }
  assetsPost();

  $("#sortable").sortable({
    opacity: 0.6,
    update: function(event, ui) {
      var Order = $("#sortable").sortable('toArray').toString();
      $('#order').val(Order);
      //alert(Order);
    }
  });
  $("#sortable").disableSelection();
  // set up sort order for form submission
  $("#mForm").submit(function() {
    $("#order").val($("#sortable").sortable('toArray'));
  });
});

This is using the jsfiddle method to mimic AJAX to show the working code. Yours will be a bit different and may have different results depending on the data that is returned.

The new item is appended to the end of the list. I did not find $('#linkoutput') in your HTML, so I appended to $('#sortable'). You can grab and sort the new item in the list just like the others. Understand that sortable will not arrange the items for you but allow the user to reorder them at will. See more: https://jqueryui.com/sortable/