jQuery UI sortable serialize or toarray methods - advice wanted
I have been looking at
http://jqueryui.com/demos/sortable/#default
most of the day. I would imaging updating a database with the new values is what most would want. As I am using ASP.NET my idea is to use the serialize to send the开发者_开发知识库 new values to a page that updates the database. Here is the script:
<script type="text/javascript">
jQuery(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
jQuery(function() {
$("#sortable li:lt(3)").css("font-weight", "bold");
});
jQuery(function() {
$("#cmdUpdateSortOrder").click(function() {
$(".neworder").append("<br />");
$("#sortable li.ui-state-default").each(function() {
$(".neworder").append($(this).text() + "<br />");
});
var str = $("#sortable li.ui-state-default").sortable("serialize");
alert(str);
var result = $('#sortable li').sortable('toArray');
alert(result);
});
});
</script>
The 1st function is lifted from the jQueryUI example, The 2nd function highlights the top three rows, The 3rd function writes the new order to the page after a button click. Both the alerts give me:
[object Object]
I was hoping for an id and value pair, something like 0=3&1=2&2=4 etc. Also if anyone has any better ways of doing this, (ajax?) it would be much appreciated.
Here is how I parse a sortable for posting to an ASP.net MVC controller action via jquery ajax.
The parseRouteRoleIds() is probably what you're after. I just have a hidden span on each sortable() div with a class of rowId. When I render that portion of the page I just place the relevant item key into the span. Later, when the user is ready to save changes, I just concatenate my list of Ids in the parseRouteRoleIds() function.
$.ajax({
type: 'POST',
data: 'reviewCycleSwitchId=' + SWID + '&reviewCycleRoleIdList=' + parseRouteRoleIds(),
url: root + saveRoutesPath,
success: function(result) { // something you would do on success }
});
function parseRouteRoleIds() {
var kys = '';
$('.usedTiles li').each(function() {
kys = kys + ',' + $('.rowId', $(this)).html();
});
return kys;
}
This is what I did in the end
<script type="text/javascript">
jQuery(function() {
var str;
$("#sortable").sortable();
$("#sortable").disableSelection();
$("#sortable li:lt(3)").css("font-weight", "bold");
$("#cmdUpdateSortOrder").click(function() {
str = $("#sortable li.ui-state-default").sortable();
var params = '{order:"' + str[0].title + ',' + str[1].title + ',' + str[2].title + '"}';
$.ajax({
type: "POST",
url: "NewsFrontPage.aspx/SubmitJSON", //URL and function to call
data: params, // Set Method Params
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
},
contentType: "application/json; charset=utf-8", //Set Content-Type
dataType: "json", // Set return Data Type
success: function(msg, status) {
//Set Response outcome
$('#ajaxmsg')[0].innerHTML = msg.d;
},
error: function(xhr, msg, e) {
//this should only fire if the ajax call did not happen or there was an unhandled exception
alert(msg);
}
});
});
});
</script>
I'm just returning the top three items as jSON data to a function SubmitJSON within the same page (NewsFrontPage.aspx). Thanks for setting me in the right direction. Note: I'm using the attribute 'title' to store the ids of the elements being sorted.
精彩评论