how to save jquery ui sortable order in wordpress

2 Views

i used jquery-ui-sortable, its Work Perfectly. But it not ssave their order, how can i save it

any one Help
here is my code

<?php
add_action('wp_enqueue_script','image_sort');       
function image_sort(){  
    wp_enqueue_script( 'jquery-ui-sortable' );  
    }
?>
<script type="text/javascript">
jQuery(document).ready( function($) {
   $('table#image_sort tbody').sortable();
});

</script>
<?php if(!empty($wp_logo_slider_images)) : ?>   
<table class="widefat fixed" cellspacing="0" id="image_sort">
    <thead>
        <tr>
            <th scope="col" class="column-slug">Image</th>
            <th scope="col">Image Links To</th>
            <th scope="col" class="column-slug">Actions</th>
        </tr>
    </thead>
         <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
             </tr>
    </tbody>
</table>
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. First you call properly jQuery lib in file, and save values in wp_options

    function image_sort(){  
wp_enqueue_script('jquery');
?>
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<?php 
wp_enqueue_script('jquery-ui-sortable');
?>
<script type="text/javascript">

jQuery(document).ready( function(e) {
   jQuery('#image_sort').sortable({
            items: '.list_item',
            opacity: 0.5,
            cursor: 'pointer',
            axis: 'y',
            update: function() {
                var ordr = jQuery(this).sortable('serialize') + '&action=list_update_order';
                jQuery.post(ajaxurl, ordr, function(response){
                    //alert(response);
                });
            }
      });
});

</script>
<?php
    }
    add_action('admin_head','image_sort');

function order_list(){
        global $wp_logo_slider_images;

        $list = $wp_logo_slider_images;
        $new_order = $_POST['list_item'];
        $new_list = array();

        foreach($new_order as $v){
            if(isset($list[$v])){
                $new_list[$v] = $list[$v];
            }
        }
        update_option('wp_logo_slider_images',$new_list);
    }
    add_action('wp_ajax_list_update_order','order_list');

<table class="widefat fixed" cellspacing="0" id="image_sort" style="width:100%; table-layout:inherit;">
     <tr id="list_item_<?php echo $image ?>" class="list_item">
         Your Values
     </tr>
</table>

    Hope you Find your Answer