Sortable con jQuery e Ajax

Question

Ho dati che sto accedendo tramite ajax da un componente Coldfusion. Sto cercando di visualizzare i dati in un ordinabile formato jQuery ui ma la funzione ordinabile non funziona. Ecco il codice che sto cercando di usare.

$(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')) 
    }); 
}); 

Tutti i dati e jQuery vengono caricati correttamente. In effetti, se ho aggiunto il seguente codice e questo elenco ordina bene.

<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 AGGIORNATO

Ecco il codice HTML che sto usando che non funziona

<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> 

Quindi ci deve essere una sorta di conflitto nella sezione ajax di codice . Qualsiasi consiglio è apprezzato.

Answer 1

Alcuni dei codici di esempio sembrano mancanti o errati. Ho rivisto e creato il seguente esempio: 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')); 
    }); 
}); 

Questo sta usando il metodo jsfiddle di imitare AJAX per visualizzare il codice di lavoro. Il tuo sarà un po 'diverso e potrebbe avere risultati diversi a seconda dei dati che vengono restituiti.

Il nuovo elemento viene aggiunto alla fine dell'elenco. Non ho trovato $('#linkoutput') nel codice HTML, quindi ho aggiunto $('#sortable'). Puoi afferrare e ordinare il nuovo elemento nell'elenco come gli altri. Comprendi che ordinabile non organizzerà gli elementi per te ma consentirà all'utente di riordinarli a volontà. Vedi di più: https://jqueryui.com/sortable/

Answer 2

Si sta rendendo l'elenco ordinabile, che modifica l'elenco e i suoi elementi, e quindi in seguito sostituendo tale elenco una volta che la richiamata è tornata. Devi spostare il tuo codice $("#sortable").sortable({ ... nella tua callback di successo, dopo il hai inserito il nuovo elenco.