How do i get multiple sortable list data to php in wordpress?
I have 2 lists, i am populating the first list with an array, and then dragging and dropping between the lists.
i need to get the data from those lists, after someone moves something between them. I think im on the right track, i have plugin.php, admin.js, and my-ajax.php
i need to somehow post data from admin.js to my-ajax.php
I have this CSS
-
<style>
#sortable3, #sortable4 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable3 li, #sortable4 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
This is the relevant stuff from the plugin.php(i can post the whole thing if needed its just to make the lists)
- wp_register_script('admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
- wp_localize_script( 'admin-js', 'dtAjax', array( 'ajaxurl' => plugins_url('my-ajax.php', __FILE__)));
- wp_enqueue_script('admin-js');
- wp_enqueue_script('jquery');
- wp_enqueue_script( 'jquery-ui-sortable' );
- register_setting( 'settings-group', 'filter_fields_order' );
- register_setting( 'settings-group', 'filter_fields_order2' );
- function plugin_options_page() {
- $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'
- ),
- );
- ?>
- <ul id="sortable3" class="filter-fields-list" >
- <?php
- 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 id="sortable4" class="filter-fields-list">
- <?php
- 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>
- <?php
- }
this is the jQuery admin.js
- jQuery(document).ready(function($){
- $(document).ready(function() {
- $('#sortable3, #sortable4').sortable({
- connectWith: ".filter-fields-list",
- stop: function (event, ui) {
- var data = $(this).sortable('serialize');
- alert(data);
- $.ajax({
- data: data,
- type: 'POST',
- url: dtAjax.ajaxurl,
- failure: function(data) {
- alert("You suck");
- },
- success: function(data) {
- alert("You Dont");
- }
- });
- }
- }).disableSelection();
- });
- });
besides plugin.php and admin.js i have my-ajax.php,