在小部件中使用AJAX对项目进行排序

时间:2012-10-01 作者:urok93

您好,我正在尝试使用jQuery sortable对管理端小部件中的项目进行排序。

然而,我在获取JS文件中的任何数据时遇到了困难alert(order).

知道这里有什么问题吗?

在php文件中:

/*
Plugin Name: Test widget
*/


add_Action(\'widgets_init\', \'boj_widgetexample_register_widgets\');

// register our widget
function boj_widgetexample_register_widgets() {
    register_widget(\'boj_widgetexample_widget_my_info\');
 }



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>
            </ul>
            <script type="text/javascript">
                    jQuery(document).ready(function($) {
                    $(\'.mywidget-list\').sortable({
                        items: \'.list_item\',
                        opacity: 0.6,
                        cursor: \'move\',
                        axis: \'y\',
                        update: function() {
                            console.log(this);                              
                            var order = $(this).sortable(\'serialize\')+ \'&action=mywidget_update_order\';
                            alert(order);
                            $.post(ajaxurl, order, function(response){
                            alert(response);
                            //  success maybe alert the user
                            })
                        }
                    });
                });
                </script>
        <?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) {
            extract($args);

            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(\'jquery-ui-sortable\');
            wp_enqueue_script(\'update-order\', plugin_dir_url(__FILE__) . \'/js/update-order.js\');

        }       

        function my_widget_save_order() {
            echo \'test\';

            //print_r($_POST);
            //die();
        }


  }

1 个回复
最合适的回答,由SO网友:onetrickpony 整理而成

正在加载的脚本将使用.mywidget-list 仅在加载文档后初始化。

一旦您将小部件放入侧边栏中new .mywidget-list 元素是通过$创建的。ajax,它不能附加可排序函数,因为它是新的。如果保存小部件,表单HTML将替换为$。ajax,因此在DOM中再次创建了一个新元素。

我知道有两种解决方案:

将JS放入form方法(内联javascript)中ajaxComplete 事件这意味着您的函数将在每次ajax请求完成时运行。您可能希望在此处检查元素是否已附加了可排序项,以避免冲突

结束