CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortablehidden-field
Marty
Marty

Reputation: 2666

Sortable list to update hidden input

I have an unordered list that is sortable using jQuery. The sort function(s) works fine and is below. Each list item has an id on this format- id="post_#" where the # is a unique number. I need to update the hidden input value with the order of the list items after they're sorted, but only the #. So if the order of the items was > post_3, post_2, post_4, post_1 < then the input value would be- value="3,2,4,1"

Here's the jQuery I have so far-

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery(function() {
            jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
                var order = $(this).sortable;

            }
            });
        });
    });
    </script>

And the HTML-

<div id="wpbody-content">
<ul id="post_sortable_list">
<li id="post_1">foo</li>
<li id="post_2">bar</li>
<li id="post_3">hello</li>
<li id="post_4">world</li>
</ul></div>

<input type="hidden" name="posts_order" value="" />

Upvotes: 0

Views: 1412

Answers (2)

user800612
user800612

Reputation: 169

can you do something like 

var order = '';
 $('#post_sortable_list').find('li').each( function () {
  order = order + $(this).text().substring(5);
});
$('posts_order').val(order);

possible i'm way off base

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6965

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery(function() {
            jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
                var order = $(this).map(function(i, e){
                    return $(e).attr("id").substring(5);
                }.join(", ");

            }
            });
        });
    });
    </script>

Try using map to get all the Ids and then joining them into a string.

Upvotes: 0

Related Questions