Sorry if this is the wrong place, but given than Im using CFC's to create
database gets and sets, and have no luck in any js/jquery forums because most
of them dont understand CF, I thought I'd post here.
I have a sortable/drag and drop list(s). Meaning I can sort both list orders
and drag from the first list to the other. All that works pretty much. My issue
is of course I need to save the sort order with json data and update the
database by way of my setMediaEditAJAX method in my cfc. As I have it now, I
can sort and click the button and get a success alert, but a dump of my data
shows the order was not saved.
Maybe my method is incorrect, or maybe the js is incorrect. I'm really new to
js, so my bet would be the js. Its mostly code I found and copied, but here is
the code. I would appreciate any help given.
<div class="left">
<div id="songList">
<fieldset class="one">
<h3>All Songs</h3>
<div id="instructions">Drag and drop or re-order Tracks</div>
<div id="songList">
<ul id="sortable1" class='droptrue'>
<cfloop from="1" to="#variables.songData.songListCnt#" index="i">
<li class="ui-state-default"
id="article_1">#variables.songData.songList[i]# <input type="hidden"
name="prodID" value="#variables.songData.songList[i]#" /></li>
</cfloop>
</ul>
</div>
</fieldset>
</div>
</div>
</form>
<form name="trackListEdit" action="index.cfm?action=younger.albumsEdit"
method="post">
<div class="right">
<div id="trackList">
<fieldset class="two">
<h3>Tracks on - #variables.songData.albumName#</h3>
<div id="instructions">Drag and drop songs to upload and re-order Album
Tracks</div>
<ul id="sortable2" class='droptrue'>
<cfloop from="1" to="#variables.songData.trackListCnt#" index="i">
<li>#variables.songData.trackList[i]#<input type="hidden" name="prodID"
value="#variables.songData.trackList[i]#" /></li>
</cfloop>
</ul>
</fieldset>
</div>
<a id="save-button" class="button secondary" href="##">Edit</a>
</div>
<script language="JavaScript" type="text/javascript">
$(function() {
$("ul.droptrue").sortable({
connectWith: 'ul',
opacity: 0.6,
update : updatePostOrder
});
$("##sortable1, ##sortable2").disableSelection();
$("##sortable1, ##sortable2").css('minHeight',$("##sortable1").height()+"px");
updatePostOrder();
});
function updatePostOrder() {
var arr = [];
$("##sortable2 li").each(function(){
arr.push($(this).attr('id'));
});
$('##postOrder').val(arr.join(','));
}
$('##save-button').click(function() {
var ids = [];
$('##sortable2 > li.stories').each(function(el) {
ids.push($(this).attr('id'));
});
var id = $('##brsel option:selected').attr('value');
// var url = "index.cfm?action=younger.trackListEdit"+id;
$.ajax({
type: "POST",
url: "index.cfm?action=younger.trackListEdit"+id,
dataType: "json",
data: $("##wrapper form").serialize(),
success: function(){
alert("Changes been succesfully saved");
}});
});
</script>
Thanks in advance.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:351637
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
