当小部件添加到边栏时，拾色器显示两次

时间：2013-10-27 作者：donnapep

我正在尝试创建一个插件，它基本上只是一个WordPress小部件。当我的小部件第一次添加到侧栏时，我很难让WordPress颜色选择器正常工作。我跟踪了这些instructions for integrating the picker. 然而，当第一次添加小部件时，这会导致两个颜色选择器显示在侧栏中，其中只有一个可用。保存设置后，将删除第二个颜色选择器，一切正常。

我还尝试在ajaxComplete 事件激发而不是ready, 但这会产生相同的结果-两个颜色选择器。

然后我发现this WordPress bug 已标记为无效的。当我尝试使用推荐的方法时sortstop 事件中，我得到了更糟糕的结果-重复的颜色选择器，但没有一个真正起作用。

我正在寻找这个问题的解决方案，因为我已经走到了死胡同，无法发布这个带有已知bug的插件。是否有可能在首次添加小部件时强制保存？还是有其他我没有考虑过的解决这个问题的方法？

Thx！

更新-以下是与颜色选择器相关的代码：

function load_color_picker_style() {
    wp_enqueue_style(\'wp-color-picker\');
}
function load_color_picker_script() {
    wp_enqueue_script(\'wp-color-picker\');
}
add_action(\'admin_print_scripts-widgets.php\', \'load_color_picker_script\');
add_action(\'admin_print_styles-widgets.php\', \'load_color_picker_style\');

function form( $instance ) {
    $defaults = array(
        \'text_color\' => \'#000\',
    );
    $instance = wp_parse_args( (array) $instance, $defaults ); ?>

    <script>
        //This shows two color pickers. So does using ajaxComplete or sortstop.
        jQuery(document).ready(function($) {
            $(\'.color-picker\').wpColorPicker();
        });
    </script>

    <p>
        <label for="<?php echo $this->get_field_id( \'text_color\' ); ?>"><?php _e( \'Text Color\', \'date-time\' ) ?>:</label>
        <input id="<?php echo $this->get_field_id( \'text_color\' ); ?>"  name="<?php echo $this->get_field_name( \'text_color\' ); ?>" type="text" value="<?php echo esc_attr( $instance[ \'text_color\' ] ); ?>" class="color-picker" />
    </p>
<?php
}

4 个回复

SO网友:Layka

我从中添加了代码this 示例和它的工作！（wp 9仍然存在与颜色选择器相同的问题）

<script>
( function( $ ){
        function initColorPicker( widget ) {
                widget.find( \'.color-picker\' ).wpColorPicker( {
                        change: _.throttle( function() { // For Customizer
                                $(this).trigger( \'change\' );
                        }, 3000 )
                });
        }
            function onFormUpdate( event, widget ) {
                initColorPicker( widget );
        }
        $( document ).on( \'widget-added widget-updated\', onFormUpdate );

        $( document ).ready( function() {
                $( \'#widgets-right .widget:has(.color-picker)\' ).each( function () {
                        initColorPicker( $( this ) );                                                   
                } );
        } );
}( jQuery ) );

SO网友:skywalker14

我努力解决这个问题，并找到了解决方案。

第一个问题是，您只需要针对侧栏中的小部件中的颜色选择器字段（以及使其正常工作的非活动小部件），这就是导致重复的原因，因为它针对的是可用小部件中的类。

$(\'#widgets-right .color-picker, .inactive-sidebar .color-picker\').wpColorPicker();

其次，您必须使用ajaxComplete 此操作将应用颜色选择器：

1）当您第一次将小部件添加到侧栏时（第一次添加时，WP会执行ajax请求）。

2）当您单击save时，它也会执行该ajax请求。

这只会将颜色选择器应用于新添加的小部件，并且在保存小部件时，因此如果您离开小部件页面，然后再次返回，则不会出现初始ajax请求，因此您添加的小部件不会自动应用颜色选择器。

要处理此问题，您还需要ready 也应用颜色选择器的函数。

您还可以将其放在单独的js文件中，以便在添加多个小部件时不会重复。

我更进一步，使其仅适用于widget save上的元素，如果它是我的widget。

    <script>
        var elems = jQuery(\'#widgets-right .color-picker, .inactive-sidebar .color-picker\');
        var widget_id = \'my-widget-id\';
        jQuery(document).ready(function($) {
            elems.wpColorPicker();
        }).ajaxComplete(function(e, xhr, settings) {
            if( settings.data.search(\'action=save-widget\') != -1 && settings.data.search(\'id_base=\' + widget_id) != -1 ) {  
                elems.wpColorPicker();
            }
        });
    </script>

SO网友:Rodrigo D\'Agostino

我刚刚在另一篇帖子中写了这篇文章，但在这里可能也很有用：）

将我所拥有的和@skywalker14发布的解决方案混合在一起，我得出以下结论：

jQuery(document).ready(function($) {

    $(\'#widgets-right .color-picker, .inactive-sidebar .color-picker\').wpColorPicker();

    // Executes wpColorPicker function after AJAX is fired on saving the widget
    $(document).ajaxComplete(function() {
        $(\'#widgets-right .color-picker, .inactive-sidebar .color-picker\').wpColorPicker();
    });
});

这样做的方法简单得多。我对它进行了测试，它似乎工作得很好。希望这仍然能对您有所帮助：）

SO网友:romengrus

我对此问题的解决方案：

在自定义脚本中添加以下事件侦听器：

    $(document).ready(function() {
        $(\'#widgets-right .color-picker\').wpColorPicker();
    });

    $(document).ajaxComplete(function(e, xhr, options) {
        if (xhr.responseText) {
            $(\'#widgets-right .color-picker\').wpColorPicker();
        }
    });

要点包括：

使用\'#widgets-right .color-picker\' 作为jquery选择器，而不仅仅是\'。ajaxComplete事件监听器中的颜色选择器检查xhr.responseText 属性颜色选择器显示两次的原因是，当小部件添加到适当的区域时，2 ajax请求激发：

发送要保存的小部件数据。（xhr.responseText=“”）

发送小部件订购信息。（xhr.responseText=\'1’）

结束

小码农CODE

当小部件添加到边栏时，拾色器显示两次

相关推荐

Remove Widgets in Dashboard