save sort oder and populate sorted records jquery UI Sortable

Question

hi i am using jquery ui sortable to sort my divs . i can get the div oder to save in the db , this is my code

<div style="margin:0 auto !important;">
    <ul id="sortable1" class="connectedSortable">
        <li id="one_1" class="ui-state-default"><div>Item 1</div></li>
        <li id="one_2" class="ui-state-default"><div>Item 2</div></li>
        <li id="one_3" class="ui-state-default"><div>Item 3</div></li>
        <li id="one_4" class="ui-state-default"><div>Item 4</div></li>
        <li id="one_5" class="ui-state-default"><div>Item 5</div></li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li id="two_1" class="ui-state-highlight"><div>Item 1</div></li>
        <li id="two_2" class="ui-state-highlight"><div>Item 2</div></li>
        <li id="two_3" class="ui-state-highlight"><div>Item 3</div></li>
        <li id="two_4" class="ui-state-highlight"><div>Item 4</div></li>
        <li id="two_5" class="ui-state-highlight"><div>Item 5</div></li>
    </ul>
</div>



<script type="text/javascript">
  jQuery(function() {

    var sortable1 = 'one_1,one_2,one_3,one_4,one_5';
    var sortable2 = 'two_1,two_2,two_3,two_4,two_5';

    jQuery( "#sortable1, #sortable2" ).sortable({
        update: function(event, ui) {

            var newOrder = jQuery(this).sortable('toArray').toString();
            if(jQuery(this).attr('id')=="sortable1"){
                sortable1 = newOrder;
            }
            else {
                sortable2 = newOrder;
            }

            console.log(sortable1);
            console.log(sortable2);
        }

    }).disableSelection();
  });
  </script>

i can save the sorted div order to DB correctly , but i have no idea how to populate the div's to correct order again . please help me . thanks in advance .

You would need to provide the php code that populates the div. — Javier Brooklyn
– Javier Brooklyn, Commented Feb 18, 2013 at 6:00

domino · Accepted Answer · 2013-02-18 06:51:43Z

1

Instead of saving the sort order to the DB as the comma separated value 1,2,3,4,5, why not just save the 'sort column' e.g. #sortable1 such that when you are loading the divs you just pass this value to your js logic.

Example:

if you save the sort column name say #sortable1 or #sortableN in the DB then you end up with

    var newOrder = jQuery(this).sortable('toArray').toString();
    if(jQuery(this).attr('id')== "<% $your_php_variable %>"){
        sortable1 = newOrder;
    }
    else {
        sortable2 = newOrder;
    }

Am not sure how you are passing the php variable to the UI that's what i've put as <% $your_php_variable %>. At some point in your php code you will have set $your_php_variable = '#sortableX';

answered Feb 18, 2013 at 6:51

domino

2,1651 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

save sort oder and populate sorted records jquery UI Sortable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related