使用jQuery和Ajax进行排序_Jquery_Ajax_Jquery Ui_Coldfusion

使用jQuery和Ajax进行排序

jquery ajax jquery-ui coldfusion

使用jQuery和Ajax进行排序,jquery,ajax,jquery-ui,coldfusion,Jquery,Ajax,Jquery Ui,Coldfusion,我有从Coldfusion组件通过ajax访问的数据。我试图以可排序的jQuery ui格式显示数据，但可排序功能不起作用。这是我试图使用的代码 $(document).ready(function() { // get assets to display var showid = <cfoutput>'#SESSION.Show#'</cfoutput>; var html = ""; function assetsPost() {

我有从Coldfusion组件通过ajax访问的数据。我试图以可排序的jQuery ui格式显示数据，但可排序功能不起作用。这是我试图使用的代码

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

$（文档）.ready（函数（）{
//获取要显示的资产
var showid='#SESSION.Show#'；
var html=“”；
函数assetsPost（）{
$.ajax({
cache:false，
类型：'POST'，
url:'cfc/cfc_COLF.cfc？method=qCOLF&returnformat=json'，
数据类型：“json”，
数据：{
show_id:showid
},
成功：功能（数据）{
如果（data&&data.length）{//执行某些操作
html+=“”；
每个（数据，函数（i，val）{
var linkID=data[i].linkID；
变量说明=数据[i]。说明；
var讨论=数据[i]。讨论；
var linkurl=data[i].linkurl；
var指数=i；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=““+discussion+””；
html+=“”；
});
html+=“”；
$（'#linkoutput'）.html（html）；
//警报（html）；
}否则{//做点什么
}
}
});
}  
资产岗位（）；
});
$（文档）.ready（函数（）{
//排序顺序
$（函数（）{
$（“#可排序”）。可排序({
不透明度：0.6，
更新：功能（事件、用户界面）{
变量顺序=$（“#可排序”）.sortable（'toArray'）.toString（）；
$（'订单'）.val（订单）；
//警报（命令）；
}
});
$（“#可排序”）.disableSelection（）；
});
//设置表单提交的排序顺序
$（“#mForm”）.submit（函数（）{
$（“#order”）.val（$（“#sortable”）.sortable（'toArray'））
});  
});

所有数据和jQuery都加载得很好。事实上，如果我添加了下面的代码，并且这个列表排序很好

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



1.


2.


3.

HTML已更新

这是我正在使用的HTML，但它不起作用

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


订单：

因此，在代码的ajax部分必须存在某种冲突。非常感谢您的建议。

您正在对列表进行排序，这将更改列表及其元素，然后在回调返回后替换该列表。插入新列表后，您需要将

$（“#sortable”）.sortable（{…

代码移动到成功回调中。

您的一些示例代码似乎丢失或不正确。我已对其进行了审阅，并创建了以下示例：

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




1.


2.


3.


订单：

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

$（文档）.ready（函数（）{
//获取要显示的资产
//var showid=“#SESSION.Show”；
var showid=1000000001；
var html=“”；
函数assetsPost（）{
$.ajax({
cache:false，
键入：“POST”，
url:“/echo/json/”，
数据类型：“json”，
数据：{
show_id:showid，
json:json.stringify([{
“linkID”：4，
'说明'：“材料”，
'讨论'：“线程”，
“链接URL”：“http://www.example.com/"
}])
},
成功：功能（数据）{
控制台日志（数据）；
如果（data&&data.length）{//执行某些操作
//html+=“”；
var html=“”；
每个（数据、函数（i、val）{
var linkID=data[i].linkID；
变量说明=数据[i]。说明；
var讨论=数据[i]。讨论；
var linkurl=data[i].linkurl；
var指数=$（“#可排序li”）。长度+1；
html+=“”；
html+=“”；
html+=“”；
html+=“
你忘了问问题。什么对你不起作用？你收到错误消息了吗？很抱歉，我不太清楚。可排序功能不起作用。我编辑了原始帖子。需要一些示例响应数据来测试解决方案。你建议我将$（“#sortable”）.sortable（{…放在$（'#linkoutput'）.html之后吗（html）；？我尝试了这个，但仍然不起作用。我对这个有点陌生，请耐心等待。使用最新代码更新。确保没有其他项目上有“可排序”id。我仍然没有捕捉到这个。成功后我移动了可排序函数：function（data）{而且它不起作用。如果我重新添加，回调之外的可排序列表仍然有效。您可能需要再次更新代码。在我看来，初始化可排序列表的代码仍然没有在success
回调中重新运行。每次手动为该列表重新创建html时，您都在销毁所有so您可以在Ajax成功回调中使用$（“#sortable”）.sortable（'refresh'）；
。您还需要避免多个非唯一的id
属性。如果您愿意尝试，这里有一些其他更新