How to save the state of a drag and drop jQuery UI Sortables front end layout editor?

3 comments

1. Brady is correct that the best way to handle saving and displaying of custom post type orders is by using the menu_order property

   Here’s the jquery to make the list sortable and to pass the data via ajax to wordpress:

   jQuery(document).ready(function($) {        
       var itemList = $('#sortable');
   
       itemList.sortable({
           update: function(event, ui) {
               $('#loading-animation').show(); // Show the animate loading gif while waiting
   
               opts = {
                   url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                   type: 'POST',
                   async: true,
                   cache: false,
                   dataType: 'json',
                   data:{
                       action: 'item_sort', // Tell WordPress how to handle this ajax request
                       order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                   },
                   success: function(response) {
                       $('#loading-animation').hide(); // Hide the loading animation
                       return; 
                   },
                   error: function(xhr,textStatus,e) {  // This can be expanded to provide more information
                       alert(e);
                       // alert('There was an error saving the updates');
                       $('#loading-animation').hide(); // Hide the loading animation
                       return; 
                   }
               };
               $.ajax(opts);
           }
       }); 
   });
   

   Here’s the wordpress function that listens for the ajax callback and performs the changes on the DB:

   function my_save_item_order() {
       global $wpdb;
   
       $order = explode(',', $_POST['order']);
       $counter = 0;
       foreach ($order as $item_id) {
           $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
           $counter++;
       }
       die(1);
   }
   add_action('wp_ajax_item_sort', 'my_save_item_order');
   add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');
   

   The key to displaying the posts in the order you have saved is to add the menu_order property to the query args:

   $args= array(
       'meta_key' => 'c3m_shown_on',
       'meta_value'=> 'home'
       'orderby' => 'menu_order',
       'order' => 'ASC'
   );
   
   $box_query = new WP_Query($args);
   

   Then run your loop and output each item… (first line is the core wp loading animation – you’ll want to hide it initially via css, and then the jquery function will display when processing)

   <img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" />
   <ul id="sortable">
       <li id="{echo post ID here}">{echo title or other name here}</li>
   </ul>
   

   Code inspired by soulsizzle’s excellent tutorial.

   Log in to Reply

2. http://jsfiddle.net/TbR69/1/

   Far from finished, but the idea is to send an ajax request on drag and drop. You may also want to trigger the ajax request only after clicking a “save” button or something. An array containing post IDs and new order would be sent.

   Then you’d have to update the posts in the database on the server end. Finally, add an order parameter to your WP_Query loop.

   I hope this gets you started. Anybody feel free to continue fiddling.

   Log in to Reply

3. /**
    *  Enqueue javascript and css files
    */
   function uc_enqueue_my_assets() {
       wp_enqueue_script( 'jquery-ui-sortable');
       wp_register_script( 'order', plugins_url( '/js/order.js', __FILE__ ), array( 'jquery' ) );
       wp_enqueue_script( 'order' );
   }
   
   function uc_is_user_logged_in()
   {
       if ( is_user_logged_in()) {
           add_action( 'wp_enqueue_scripts', 'uc_enqueue_my_assets' );
           add_action( 'admin_enqueue_scripts', 'uc_enqueue_my_assets' );
       }
   }
   add_action('init', 'uc_is_user_logged_in');
   
   
   /**
    *  Update order of posts by ajax on trigger of drag and drop event
    */
   function uc_sort_post_items() {
   
       $order = wp_parse_id_list(explode(',', $_POST['order']));
       write_log($order);
   
       global $wpdb;
       $list = join(', ', $order);
       $wpdb->query('SELECT @i:=0');
       $wpdb->query(
           "UPDATE wp_posts SET menu_order = ( @i:= @i+1 )
           WHERE ID IN ( $list ) ORDER BY FIELD( ID, $list );"
       );
   
       wp_die();
   }
   add_action('wp_ajax_uc_sort_post_items', 'uc_sort_post_items');
   add_action('wp_ajax_nopriv_uc_sort_post_items', 'uc_sort_post_items');
   
   
   
   /**
    *  Display sorted posts
    */
   function uc_pre_get_posts( $wp_query ) {
       write_log(basename($_SERVER['PHP_SELF']));
       $wp_query->set('orderby', 'menu_order');
       $wp_query->set('order', 'ASC');
   }
   add_action( 'pre_get_posts', 'uc_pre_get_posts', 1 );
   

   Javascript file order.js

   $('#the-list').sortable({
           update: function(event, ui) {
   
               $.ajax({
   
                   url: '/wp-admin/admin-ajax.php',
                   type: 'post',
                   dataType: 'json',
                   data:{
                       action: 'uc_sort_post_items', // Tell WordPress how to handle this ajax request
                       order: '4567,4569,4565 ' // Passes ID's of list items in  1,3,2 format. Write your own js method to access the list of id from frontend.
                   },
                   success: function(data, response) {
                       console.log(response);
                   },
                   error: function(xhr,textStatus,e) {
                       alert(e);
                   }
   
                   });
   
           }
       });
   

   Log in to Reply