WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Hi I am trying to use jQuery sortable to sort items in a widget on the admin side.

However I am having trouble getting any data in the JS file when I do alert(order).

Any idea what might be wrong here?

in the php file:

Plugin Name: Test widget

add_Action('widgets_init', 'boj_widgetexample_register_widgets');

// register our widget
function boj_widgetexample_register_widgets() {

class boj_widgetexample_widget_my_info extends WP_Widget {

        // process the new widget
        function boj_widgetexample_widget_my_info() {
            $widget_opts = array(
                'classname' => 'boj_widgetexample_widget_class',
                'description' => 'Display a user favourite movie and song'
            $this->WP_Widget('boj_widgetexample_widget_my_info', 'My info widget', $widget_ops);
            /* load the widget javascript for the widgets admin screen. */
            add_action( 'load-widgets.php', array(&$this, 'my_widget_admin_script') );

            // function to process ajax order
            add_action('wp_ajax_mywidget_update_order',array(&$this, 'my_widget_save_order') );                 


                    // displaying the widget form in admin
        function form($instance) {
            $defaults = array('title'=>'my info', 'movie'=>'','song'=>'');
            $instance = wp_parse_args( (array) $instance, $defaults);
            $title = $instance['title'];
            $movie = $instance['movie'];
            $song = $instance['song'];
            <ul class="mywidget-list">
            <li class="list_item">Title: <input class="widefat" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></li>
            <li class="list_item">Movie: <input class="widefat" name="<?php echo $this->get_field_name('movie'); ?>" type="text" value="<?php echo esc_attr($movie); ?>" /></li>
            <script type="text/javascript">
                    jQuery(document).ready(function($) {
                        items: '.list_item',
                        opacity: 0.6,
                        cursor: 'move',
                        axis: 'y',
                        update: function() {
                            var order = $(this).sortable('serialize')+ '&action=mywidget_update_order';
                            $.post(ajaxurl, order, function(response){
                            //  success maybe alert the user
        <?php }

        // saving the widget options
        function update($new_instance, $old_instance) {
            $instance = $old_instance;
            $instance['title'] = strip_tags($new_instance['title'] );
            $instance['movie'] = strip_tags($new_instance['movie'] );
            $instance['song'] = strip_tags($new_instance['song'] );

            return $instance;

        // output on front end
        function widget($args, $instance) {

            echo $before_widget;
            $title = apply_filters( 'widget_title', $instance['title']);
            $movie = empty($instance['movie'] ) ? '&nbsp;' : $instance['movie'];

            if ( ! empty($title)) { echo $before_title . $title . $after_title; }

        /* Push the widget scripts into widget admin page */
        function my_widget_admin_script() {                     
            wp_enqueue_script('update-order', plugin_dir_url(__FILE__) . '/js/update-order.js');


        function my_widget_save_order() {
            echo 'test';


share|improve this question

closed as off topic by anu, kaiser, Rarst Oct 1 '12 at 19:26

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

This seems to have very little to do with WordPress. – anu Oct 1 '12 at 14:38
up vote 0 down vote accepted

The script you are loading will apply the sortable to all elements with the .mywidget-list class just after the document has loaded.

Once you drop your widget inside a sidebar, a new .mywidget-list element is created trough $.ajax, which cannot have your sortable function attached to it, because it's new. If you save the widget, the form HTML gets replaced with $.ajax, so again a new element is created in the DOM.

There are two solutions that I know of:

  1. Put your JS inside the form method (inline javascript)
  2. Wrap your sortable call within a function that you hook on the ajaxComplete event. This means your function will run each time an ajax request completes. You might want to check here if the element already has a sortable attached, to avoid conflicts
share|improve this answer
How would the code look like for the 1st option? I'm a bit green on jQuery. – drtanz Oct 1 '12 at 12:08
Exactly what you have posted above, but wrapped between <script> and </script> tags – onetrickpony Oct 1 '12 at 12:28
I tried putting the script within the form() function enclosed within <script> but it didnt work. – drtanz Oct 1 '12 at 12:32
Does the sorting work? Can you move items around? – onetrickpony Oct 1 '12 at 12:37
Yes, but the order variable is still not returning correctly, it only alerts '&action=mywidget_update_order' – drtanz Oct 1 '12 at 12:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.