title: Sortable with jQuery and Ajax
body: <p>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.</p>
  
  <pre><code>$(document).ready(function() { 
      // get assets to display
      var showid = &lt;cfoutput&gt;'#SESSION.Show#'&lt;/cfoutput&gt;;
      var html = "";
  
      function assetsPost() {
          $.ajax({
              cache: false,
              type:'POST',
              url:'cfc/cfc_COLF.cfc?method=qCOLF&amp;returnformat=json',
              dataType: "json",
              data: {
                show_id:    showid
              },
              success:function(data) {
                  if(data &amp;&amp; data.length) {   // DO SOMETHING 
  
                           html += "&lt;ul id='sortable'&gt;";
  
                  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 += "&lt;li id=' " + index + " ' class='ui-state-default'&gt;";                  
                           html += "&lt;h5 style='color:#000; text-align:left;'&gt;";
                           html += "&lt;a class='process-asset' id=' " + linkID + " ' name='done'&gt;&lt;img src='images/icon_done.png'&gt;&lt;/a&gt;";
                           html += "&lt;a href='" + linkurl + "' target='_blank'&gt; " + description + "&lt;/a&gt;";
                           html += "&lt;a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'&gt;&lt;img src='images/icon_remove.png'&gt;&lt;/a&gt;";
                           html += "&lt;/h5&gt;";
                           html += "&lt;p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'&gt; " + discussion + "&lt;/p&gt;";
                           html += "&lt;/li&gt;";
                  });
                           html += "&lt;/ul&gt;";
  
                   $('#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'))
    });  
  });
  </code></pre>
  
  <p>All the data and the jQuery is loading just fine. In fact, if I added the following code and this list sorts just fine.</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
    &lt;li id="1" class="ui-state-default "&gt;
        &lt;h5&gt;1&lt;/h5&gt;
    &lt;/li&gt;
    &lt;li id="2" class="ui-state-default "&gt;
        &lt;h5&gt;2&lt;/h5&gt;
    &lt;/li&gt;
    &lt;li id="3" class="ui-state-default "&gt;
        &lt;h5&gt;3&lt;/h5&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>HTML</strong> UPDATED</p>
  
  <p>Here is the HTML that I am using that isn't working</p>
  
  <pre><code>&lt;form enctype="multipart/form-data"  
    ACTION="page.cfm?#cgi.QUERY_STRING#" 
    id="mForm" 
    method="post"&gt;
    &lt;fieldset&gt;
    &lt;div id="linkoutput"&gt;&lt;/div&gt;
  
    &lt;label&gt;Order:&lt;/label&gt; &lt;input type="text" id="order" /&gt;
    &lt;div class="mfInfo"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/fieldset&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>So there has to be some sort of conflict in the ajax section of code. Any advice is appreciated.</p>