Title: Jquery Sortable lists using wordpress settings API
Last modified: October 6, 2019

---

# Jquery Sortable lists using wordpress settings API

 *  Resolved [sanguine1](https://wordpress.org/support/users/sanguine1/)
 * (@sanguine1)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/jquery-sortable-lists-using-wordpress-settings-api/)
 * im trying to create 2 lists that i can sort data between, and hopefully get 2
   arrays of the data. So far i have the lists working, and i can save the order
   of the data but im having trouble saving the data between the lists. Please help.
   Unsure how much code to paste here so im just gonna put it all.
    here is my php
 *     ```
       <?php
       /**
        * Plugin Name: Test Plugin
        * Version: 1.0
        */
       class TestPlugin{
   
       	private static $instance;
   
   
           static function GetInstance()
           {         
               if (!isset(self::$instance))
               {
                   self::$instance = new self();
               }
               return self::$instance;
           }
   
           public function Initialize_Plugin()
           {  	
           	add_action('admin_enqueue_scripts',array($this, 'admin_scripts'));
           	add_action('admin_menu', array($this,'create_menu' ));
           }
   
       	function admin_scripts() 
           {
           	if (is_admin()) {
       			wp_register_script('admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
       			wp_enqueue_script('admin-js');
       			wp_enqueue_script('jquery-ui-core');
       			wp_enqueue_script( 'jquery-ui-sortable' );
           	}
       	}
   
       	function create_menu() 
           {
   
       		//create new top-level menu
       		add_menu_page(
               		'TEST Options',
                       'TEST Options',
                       'administrator',
                       'test_options',
                       array($this, 'plugin_options_page'),
                       null,
               		99
               	);
   
       		//call register settings function
       		add_action( 'admin_init',array($this, 'plugin_options') );
       	}
   
       	function plugin_options()
           {
           	register_setting( 'settings-group', 'filter_fields_order' );
       	}
   
       	function plugin_options_page()
           {
           	?>
   
           	<div class="wrap">
               	<h2>Theme Options</h2>
               	<br/>
   
               	<?php settings_errors(); ?>
   
               	<form method="post" action="options.php" id="theme-options-form">
                   	<?php settings_fields( 'settings-group' ); ?>
                   	<?php do_settings_sections( 'settings-group' ); ?>
   
                   	<?php
                   	$fields_order_default = array(
                      		0 => array(
                           	'id' => '0',
                           	'name' => 'List Item 1',
                           	'slug' => 'list_item_1'
                       	),
                       	1 => array(
                           	'id' => '1',
                           	'name' => 'List Item 2',
                           	'slug' => 'list_item_2'
                       	),
                       	2 => array(
                           	'id' => '2',
                           	'name' => 'List Item 3',
                           	'slug' => 'list_item_3'
                       	),
                       	3 => array(
                           	'id' => '3',
                           	'name' => 'List Item 4',
                           	'slug' => 'list_item_4'
                       	),
                       	4 => array(
                           	'id' => '4',
                           	'name' => 'List Item 5',
                           	'slug' => 'list_item_5'
                       	),
                   	);
                   	?>
   
                   	<div class="admin-module"> 
                       	<label><b>Sortable List</b> <em>(Drag & drop to rearrange order)</em></label>
   
       					<ul style="display: flex;"> 
                       		<ul style="display: block;">
                       			<p>Group1</p>
                       			<ul id="sortable1" class="filter-fields-list" >
                           			<?php 
                               			$filter_fields_order = get_option('filter_fields_order', $fields_order_default); 
                               			foreach($filter_fields_order as $value) { ?>
   
                                   			<?php
                                       			if(isset($value['id'])) { $id = $value['id']; }
                                       			if(isset($value['name'])) { $name = $value['name']; }
                                       			if(isset($value['slug'])) { $slug = $value['slug']; }
                                  				?>
   
                                   			<li class="sortable-item">
                                       			<?php echo $name; ?>
                                       			<input type="hidden" name="filter_fields_order[<?php echo $id; ?>][id]" value="<?php echo $id; ?>" />
                                       			<input type="hidden" name="filter_fields_order[<?php echo $id; ?>][name]" value="<?php echo $name; ?>" />
                                       			<input type="hidden" name="filter_fields_order[<?php echo $id; ?>][slug]" value="<?php echo $slug; ?>" />
                                   			</li>
                           			<?php } ?>
                       			</ul>
                           	</ul>
                       		<ul style="display: block;">
                       			<p>Group2</p>
                       			<ul id="sortable2" class="filter-fields-list">
                           			<?php 
                               			$filter_fields_order2 = get_option('filter_fields_order2', $fields_order_default2); 
                               			foreach($filter_fields_order2 as $value) { ?>
   
                                   			<?php
                                       			if(isset($value['id'])) { $id = $value['id']; }
                                       			if(isset($value['name'])) { $name = $value['name']; }
                                       			if(isset($value['slug'])) { $slug = $value['slug']; }
                                  				?>
   
                                   			<li class="sortable-item">
                                       			<?php echo $name; ?>
                                       			<input type="hidden" name="filter_fields_order2[<?php echo $id; ?>][id]" value="<?php echo $id; ?>" />
                                       			<input type="hidden" name="filter_fields_order2[<?php echo $id; ?>][name]" value="<?php echo $name; ?>" />
                                       			<input type="hidden" name="filter_fields_order2[<?php echo $id; ?>][slug]" value="<?php echo $slug; ?>" />
                                   			</li>
                           			<?php } ?>
                       			</ul>
                           	</ul>
                  			</ul>         
                   	</div>
   
                   	<?php submit_button(); ?>
               	</form>
   
           	</div>
           	<?php
       	}
       } 
       $TestPlugin = TestPlugin::GetInstance();
       $TestPlugin->Initialize_Plugin();
       ```
   
 * and i have admin.js
 *     ```
       jQuery(document).ready(function($){
   
       	$(document).ready(function() {
       	   $('#theme-options-form').submit(function() { 
       	      $(this).ajaxSubmit({
       	      	 onLoading: $('.loader').show(),
       	         success: function(){
       	         	$('.loader').hide();
       	            $('#save-result').fadeIn();
       	            setTimeout(function() {
       				    $('#save-result').fadeOut('fast');
       				}, 2000);
       	         }, 
       	         timeout: 5000
       	      }); 
       	      return false; 
       	   });
       	});
   
   
       	$("#sortable1, #sortable2").sortable({
           	connectWith: ".filter-fields-list",
       	});
   
       	$(document).ready(function () {
       		$('#sortable1, #sortable2').sortable({
       			curosr: 'move'
       		});
       	});
   
       });
       ```
   
 * I feel like im close, but probably not. Thanks for your time.
    I’m sorry about
   the incredibly poor format/syntax. It wasnt great at first but something happened
   when i pasted it in. It must be stabbing your eyes.
    -  This topic was modified 6 years, 8 months ago by [sanguine1](https://wordpress.org/support/users/sanguine1/).
    -  This topic was modified 6 years, 8 months ago by [sanguine1](https://wordpress.org/support/users/sanguine1/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [sanguine1](https://wordpress.org/support/users/sanguine1/)
 * (@sanguine1)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/jquery-sortable-lists-using-wordpress-settings-api/#post-12024213)
 * i was able to make the lists work, but without using the settings API submit 
   button, here is my solution if it will help in anyone in the future. These files
   went into “mysite/wp-content/plugins/myplugin”
 * plugin.php
 *     ```
       <?php
       /**
        * Plugin Name: Test Plugin
        * Version: 1.0
        */
       include 'my-ajax.php';
       class TestPlugin{
   
       	private static $instance;
   
   
           static function GetInstance() {         
               if (!isset(self::$instance)) {
                   self::$instance = new self();
               }
               return self::$instance;
           }
   
           public function Initialize_Plugin() {  	
           	add_action('admin_enqueue_scripts',array($this, 'admin_scripts'));
           	add_action('admin_menu', array($this,'create_menu' ));
           }
   
           function admin_scripts() {
           	if (is_admin()) {
       	    wp_register_script('admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
       	    wp_enqueue_script('admin-js');
       	    wp_enqueue_script('jquery-ui-core');
       	    wp_enqueue_script( 'jquery-ui-sortable' );        	
                   wp_register_style( 'test_jquery', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css', false, '1.0.0' );
            	    wp_enqueue_style( 'test_jquery' );
           	}
           }
   
       	function create_menu() {
       		add_menu_page(
               	'TEST Options',
                       'TEST Options',
                       'administrator',
                       'test_options',
                       array($this, 'plugin_options_page'),
                       null,
               	99
               	);    	
       		//call register settings function
       		add_action( 'admin_init',array($this, 'plugin_options') );
       	}
       	function plugin_options() {
       	    $style = '
       	        <style>
       		#sortable3, #sortable4 {
       		    border: 1px solid #eee;
       		    width: 142px;
           		    min-height: 40px;
           		    list-style-type: none;
           		    margin: 0;
           		    padding: 5px 0 0 0;
           		    float: left;
           		    margin-right: 10px;
                           background: #000000;
         		}
         		#sortable3 li, #sortable4 li {
         		    margin: 0 5px 5px 5px;
         		    padding: 5px;
         		    font-size: 1.2em;
         		    width: 120px;
         		}
         		</style>';
           	echo $style;
       	}
   
           function plugin_options_page() {
           	register_setting( 'settings-group', 'filter_fields_order' );
           	register_setting( 'settings-group', 'filter_fields_order2' );
           	//delete_option('filter_fields_order');
           	//delete_option('filter_fields_order2');
           	$s3_array = get_option('filter_fields_order');
           	$s4_array = get_option('filter_fields_order2');
   
           	?> 
       	<ul id="sortable3" class="filter-fields-list">
       	<?php    		
           	if(!$s3_array){
                   	$s3_array = array(
                                       array (
           				    'id' => "1",
                                           'name' => "1",
                                       ),
                       	        array (
           				    'id' => "2",
           				    'name' => "2",
                                        ),
                       	        array (
           				    'id' => "3",
                                           'name' => "3",
                                       ),
                       	        array (
           				    'id' => "4",
           				    'name' => "4",
                                       ),
                       	        array (
           				    'id' => "5",
                                           'name' => "5",
                                       ),
                       	        array (
           				    'id' => "6",
           				    'name' => "6",
                                       ),                
       			    );
   
         	    foreach ( $s3_array as $sat ) {
         	        echo '<li id="'. $sat['id'] .'" class="ui-state-default">'. $sat['name'] .'</li>';
         	    }                      
               } else {
                   if($s3_array[0] == null) {
   
                   } else {
                       $s3_array = get_option('filter_fields_order');
              		foreach ($s3_array as $sat) {
                           echo '<li id="'. $sat['id'] .'" class="ui-state-default">'. $sat['name'] .'</li>';
                       }
                   }
               }
       	?>
       	</ul>
           	<ul id="sortable4" class="filter-fields-list">
               <?php
           	if ($s4_array[0] == null){
   
               } else {
                   foreach ($s4_array as $sa) {
                       echo '<li id="'. $sa['id'] .'" class="ui-state-default">'. $sa['name'] .'</li>';
                   }
               }
               ?>
       	</ul>
       	<?php
       	}
       } 
       $TestPlugin = TestPlugin::GetInstance();
       $TestPlugin->Initialize_Plugin();
       ```
   
 * admin.js
 *     ```
       jQuery(document).ready(function($){
       	$('#sortable4, #sortable3').sortable({
               connectWith: ".filter-fields-list",
           	update: function (event, ui) {
                   $('#loading-animation').show();
            	 	var list = this.id;
                   var order = $(this).sortable('toArray').toString();
                   args = {
                       url: ajaxurl,
                       type: 'POST',
                       async: true,
                       cache: false,
                       dataType: 'json',
                       data:{
                           action: 'item_sort', 
                           order:  order, 
                           list: list
                       },
                       success: function(response) {
                           //alert(list+order);
                           return; 
                       },
                       error: function(xhr,textStatus,e) {  
                           alert(e);
                           return; 
                       }
                   };
                   $.ajax(args);
           	}
       	}).disableSelection();
       });
       ```
   
 * my-ajax.php
 *     ```
       <?php
       function my_save_item_order() {	
           $order = explode(',', $_POST['order']);
       	$list = $_POST['list'];
           if($list == "sortable3") {
           	update_option('filter_fields_order', $order);
           }    
           if($list == "sortable4") {
           	update_option('filter_fields_order2', $order);
           } 
           wp_die();
       }
       add_action('wp_ajax_item_sort', 'my_save_item_order');
       ```
   
 * Its probably not the best way to do any of it(not that i would know if it was
   or wasnt) but i hope it helps someone.
    -  This reply was modified 6 years, 7 months ago by [sanguine1](https://wordpress.org/support/users/sanguine1/).
    -  This reply was modified 6 years, 7 months ago by [sanguine1](https://wordpress.org/support/users/sanguine1/).
 *  Thread Starter [sanguine1](https://wordpress.org/support/users/sanguine1/)
 * (@sanguine1)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/jquery-sortable-lists-using-wordpress-settings-api/#post-12024235)
 * what am i doing wrong that any code ive written, when i paste it in here it ends
   up all jumbled up?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Jquery Sortable lists using wordpress settings API’ is closed to new 
replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [sortable](https://wordpress.org/support/topic-tag/sortable/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 1 participant
 * Last reply from: [sanguine1](https://wordpress.org/support/users/sanguine1/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/jquery-sortable-lists-using-wordpress-settings-api/#post-12024235)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics