Is it possible to get the serialized list of items from a UL in jquery by calling the serialize method directly instead of using a callback? The code snippet:
var sortableLinks = $("#category_links_list_3");
var linkOrderData = $(sortableLinks).sortable('serialize');
category_links_list_3 is the id of the UL
The DOM structure is:
<div class="hidden" id="inline_list_3">
<ul class="category_links_list ui-sortable" id="category_links_list_3">
<li class="link_title ui-state-default" id="category_link_8">Coconut Oil</li>
<li class="link_title ui-state-default" id="category_link_9">Hempseed</li>
</ul>
</div>
Thanks...
This post was very helpful. In case you're looking for additional help, here's how I got it to work (using haml-rails). Using the toArray function is slightly different. If using `serialize' you would have to set the attribute, again, as 'data-item="data-item_#{id}'.
Thank you, Internet, for knowing so many programming solutions.
:css
#sortable { list-style-type: none; margin: 40 20; padding: 0; width: 500; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
:javascript
$(function() {
$( "#sortable" ).sortable({
update: function( event, ui ) {
var data = $("#sortable").sortable('toArray', {attribute: "data-item"});
// return ids in order after update
//alert(JSON.stringify(data));
$.ajax({
type: "PATCH",
async: true,
url: "/calendar/update_order.json",
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/json',
error: function(data) { return false; },
success: function(data) { return false; }
});
}
});
$( "#sortable" ).disableSelection();
});
#sort_tickets
%ul#sortable
- @tickets.each do |ticket|
%li.ui-state-default(data-item="#{ticket.id}")<
%span.ui-icon.ui-icon-arrowthick-2-n-s<
= ticket.customer
I finally got the answer! You need to make the UL sortable first before calling the serialize method on it:
var sortableLinks = $("#category_links_list_3");
$(sortableLinks).sortable();
var linkOrderData = $(sortableLinks).sortable('serialize');
This time linkOrderData contains category_link[]=8&category_link[]=9
If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1
, foo_5
, foo_2
will serialize to foo[]=1&foo[]=5&foo[]=2
. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1
or foo-1
or foo_1
all serialize to foo[]=1
.
Above one is a example. that i used it. That is why I saw 2 you.
http://jqueryui.com/demos/sortable/#method-serialize
it migth be help you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With