Question

I need to get a variable $option passed to the php script. the $option is on the hidden field named “option”.

Basically the user have some items that can be rearranged by using something like drag & drop. The items are stored in an array and once the items had been rearranged, the array gets reordered and saved.

The problem can’t be solved by changing get_option($option); to get_option('myoption'); I must get $option from the hidden field.

I spend a lot of time searching on the web for an example, solution and tutorial with no hope, It’s too much for my head.

            array_walk($_POST['order'], 'strip_text_menu_editor');
            $order_array = $_POST['order'];
            $current_menu = get_option($option);    
            $new_order = array();
            foreach($order_array as $order) {
                foreach($current_menu as $key => $value) {
                    if($order == $key) {
                        $new_order[] = $value;
                    }
                }
            }
            update_option($option, $new_order);
            echo '<script type="text/javascript" >
            jQuery(document).ready(function($) {
            var i = 0';
            echo "jQuery('#sortable li').each(function(){
                    var name = 'listItem_' + i;
                    i++;
                });
            });
            </script>";
            die(true);

jQuery

            jQuery(document).ready(function(jQuery) {
                jQuery('#sortable li:odd').addClass('stripe');
                jQuery('#sortable').sortable({
                    handle : '.handle', 
                    update: function(event, ui) {
                        jQuery('#sortable li').removeClass('stripe');
                        jQuery('#sortable li:odd').addClass('stripe');
                        var order = jQuery('#sortable').sortable('toArray');
                        var data = {
                            action: 'menu_editor_special_action',
                            order: order,
                        };
                        jQuery.post(ajaxurl, data, function(response){
                            jQuery('#response').html('Got this from the server: ' + response);
                        });
                    }
                });
            });

HTML

<ul>
<li id="listItem_0" class="">Item A</li>
<li id="listItem_1" class="stripe">Item B</li>
<li id="listItem_2" class="">Item C</li>
<li id="listItem_3" class="stripe">Item D</li>
<li id="listItem_4" class="">Item E</li>
<li id="listItem_5" class="stripe">Item F</li>
</ul>

Called on the PHP script

function strip_text_menu_editor(&$value, $key) {
        $value = str_replace('listItem_', '', $value);
    }

Answer 1

From what I can see of the jQuery fragment you’ve posted, you would need to add the ‘option’ value to the data array in your post.

var data = {
    action: 'menu_editor_special_action',
    order: order,
    option: $('input[name=option]').val(),  //This part is new
};
jQuery.post(ajaxurl, data, function(response){
    jQuery('#response').html('Got this from the server: ' + response);
});

Of course I don’t know what sort of data you have stored in ‘option’ and I don’t know what your get_option() etc. functions are doing with it to know how you need to send it for your server-side code to understand, but this should get you started.