ColdFusionコンポーネントからajax経由でアクセスしているデータがあります。私はソート可能なjQuery UI形式でデータを表示しようとしていますが、ソート可能な機能は動作していません。ここで私が使用しようとしているコードです。jQueryとAjaxでソート可能
$(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'))
});
});
すべてのデータと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>
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>
が動作していない使用していますHTMLだから、コードのAjaxのセクションでの紛争のいくつかの並べ替えが存在しなければなりませんさ。アドバイスをいただければ幸いです。
あなたは質問をしています。 *あなたのために働いていないものは何ですか?エラーメッセージが表示されますか? –
申し訳ありませんが、私は非常に明確ではありませんでした。ソート可能な機能が動作していません。私は元の投稿を編集しました。 –
ソリューションのテストを行うための応答データのサンプルが必要です。 – Twisty