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>
So there has to be some sort of conflict in the ajax section of code. Any advice is appreciated.
You are making the list sortable, which changes the list and its elements, and then later replacing that list once your callback returns. You need to move your $("#sortable").sortable({ ... code into your success callback, after you've inserted the new list.
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/