Question

I have a hidden form field that stores the values of a jQuery UI sortable list.

<input name="asw_options[asw_icon_order]" type="hidden" value="<?php echo $aswicons ?>" />

I have a jQuery function that saves the order of the sorted list.

/* Social Networking Icon Sorter */
var itemList = $('#asw-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
                //$('#asw_options[asw_icon_order]').val(itemList.sortable('toArray').toString()); // Update hidden field with new values
                $('input[name=asw_options[asw_icon_order]]').val(itemList.sortable('toArray').toString());
                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);
    }
}); 

The data stored gets saved like this:

Delicious,Twitter,Facebook,Googleplus,Stumbleupon,Pinterest,LinkedIn,Youtube

All is working well. You reorder the fields and the save happens automatically through jQuery.

My issue is that the hidden field that is stored above, I need to be able to update that dynamically through jQuery after jQuery has successfully done the new save of the order.

This is a WordPress plugin, so I need the hidden input field updated because if a user hits the “Save” button, it saves the older values because that is what the initial “Value” of the hidden field is.

As you can see in the jQuery code I thought I could add the code to the “Success” function and then update the hidden field then, however it doesn’t work.

Any help would be greatly appreciated.

Answer 1

You are missing some quotes in your selector, try this:

$('input[name="asw_options[asw_icon_order]"]').val(itemList.sortable('toArray').toString());