Jquery Sortable lists using wordpress settings API

  • Resolved sanguine1

    (@sanguine1)


    5 years, 5 months ago

    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 5 years, 5 months ago by sanguine1.
    • This topic was modified 5 years, 5 months ago by sanguine1.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter sanguine1

    (@sanguine1)

    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 5 years, 5 months ago by sanguine1.
    • This reply was modified 5 years, 5 months ago by sanguine1.
    Thread Starter sanguine1

    (@sanguine1)

    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.