ドラッグアンドドロップ後のウィジェットフォームの更新(WP保存バグ)


15

数ヶ月前にこれに関するバグレポートを投稿しました(WordPress trac(ウィジェットインスタンスフォームの更新バグ))。ここでもそれについて書いてみたいと思いました。たぶん誰かが私よりもこの問題に対するより良い解決策を持っているでしょう。

基本的に問題は、ウィジェットをサイドバーにドロップした場合、手動で保存を押す(またはページをリロードする)までウィジェットフォームが更新されないことです。

これにより、form()(保存ボタンを押すまで)ウィジェットインスタンスIDに依存する関数のすべてのコードが使用できなくなります。Ajaxリクエスト、カラーピッカーなどのjQueryのようなものは、すぐには機能しません。その関数からは、ウィジェットインスタンスがまだ初期化されていないように見えるからです。

汚い修正は、livequeryのようなものを使用して自動的に保存ボタンをトリガーすることです

$("#widgets-right .needfix").livequery(function(){
  var widget = $(this).closest('div.widget');
  wpWidgets.save(widget, 0, 1, 0);
  return false;
});

ウィジェットのインスタンスが初期化されていないよう.needfixform()あれば、クラスを追加します。

 <div <?php if(!is_numeric($this->number)): ?>class="needfix"<?php endif; ?>
   ...
 </div>

このソリューションの欠点の1つは、多数のウィジェットが登録されている場合、ブラウザが大量のCPUを消費することです。livequeryはDOMの変更を毎秒チェックするためです(これを特にテストしなかったのは単なる推測です)。

バグを修正するより良い方法のための提案はありますか?


完全な保存サブミットをトリガーする代わりに、保存ボタンを押すとトリガーが必要なIDを提供し、そのコードを分離し、ドロップ操作の最後にそれを呼び出すことをトリガーする方が意味がありませんか?
-hakre

回答:


5

最近、同じような状況でバトルをしました。ウィジェットのAjaxは冗談ではありません!インスタンス間で物事を動作させるために、かなりクレイジーなコードを書く必要があります。私はライブクエリに精通していませんが、DOMを毎秒チェックするということを言うなら、私はあなたのためにそれほど厳しくない解決策を持っているかもしれません:

var get_widget_id = function ( selector ) {
    var selector, widget_id = false;
    var id_attr = $( selector ).closest( 'form' ).find( 'input[name="widget-id"]' ).val();
    if ( typeof( id_attr ) != 'undefined' ) {
        var parts = id_attr.split( '-' );
        widget_id = parts[parts.length-1];
    }
    return parseInt( widget_id );
};

この関数にセレクターまたはjQueryオブジェクトを渡すと、現在のインスタンスのインスタンスIDが返されます。この問題を回避する方法は他にありません。私だけではないことを聞いてうれしいです:)


7

私は自分の質問に答えるのは好きではありませんが、これがこれまでの最善の解決策だと思います。

$('#widgets-right').ajaxComplete(function(event, XMLHttpRequest, ajaxOptions){

  // determine which ajax request is this (we're after "save-widget")
  var request = {}, pairs = ajaxOptions.data.split('&'), i, split, widget;

  for(i in pairs){
    split = pairs[i].split('=');
    request[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
  }

  // only proceed if this was a widget-save request
  if(request.action && (request.action === 'save-widget')){

    // locate the widget block
    widget = $('input.widget-id[value="' + request['widget-id'] + '"]').parents('.widget');

    // trigger manual save, if this was the save request 
    // and if we didn't get the form html response (the wp bug)
    if(!XMLHttpRequest.responseText)
      wpWidgets.save(widget, 0, 1, 0);

    // we got an response, this could be either our request above,
    // or a correct widget-save call, so fire an event on which we can hook our js
    else
      $(document).trigger('saved_widget', widget);

  }

});

これにより、ウィジェット保存リクエストが完了した直後に、ウィジェット保存ajaxリクエストが発生します(フォームhtmlで応答がなかった場合)。

jQuery(document).ready()関数に追加する必要があります。

ここで、ウィジェットフォーム関数によって追加された新しいDOM要素にJavaScript関数を簡単に再アタッチしたい場合は、単に「saved_widget」イベントにバインドします。

$(document).bind('saved_widget', function(event, widget){
  // For example: $(widget).colorpicker() ....
});

3
jQuery 1.8以降、.ajaxComplete()メソッドはドキュメントにのみ添付されることに注意してください。- api.jquery.com/ajaxComplete したがって、スニペットの最初の行読んでください:$(ドキュメント).ajaxComplete(機能少なくともWP 3.6以降のために(イベント、XMLHttpRequestを、ajaxOptions){
デイビット・ラング

3

最近これに遭遇し、従来の「widgets.php」インターフェースでは、既存のウィジェット(#widgets-rightdiv 内のもの)に対してjavascriptの初期化を直接実行しwidget-added、新しく追加されたウィジェットに対してイベントを介して間接的に実行する必要があるようです。一方、カスタマイザーの「customize.php」インターフェースでは、既存および新規のすべてのウィジェットにwidget-addedイベントが送信されるため、そこで初期化するだけです。これに基づいて、次のWP_Widget1つの関数をオーバーライドすることにより、ウィジェットのフォームにJavaScriptの初期化を簡単に追加できるクラスの拡張機能がありform_javascript_init()ます。

class WPSE_JS_Widget extends WP_Widget { // For widgets using javascript in form().
    var $js_ns = 'wpse'; // Javscript namespace.
    var $js_init_func = ''; // Name of javascript init function to call. Initialized in constructor.
    var $is_customizer = false; // Whether in customizer or not. Set on 'load-customize.php' action (if any).

    public function __construct( $id_base, $name, $widget_options = array(), $control_options = array(), $js_ns = '' ) {
        parent::__construct( $id_base, $name, $widget_options, $control_options );
        if ( $js_ns ) {
            $this->js_ns = $js_ns;
        }
        $this->js_init_func = $this->js_ns . '.' . $this->id_base . '_init';
        add_action( 'load-widgets.php', array( $this, 'load_widgets_php' ) );
        add_action( 'load-customize.php', array( $this, 'load_customize_php' ) );
    }

    // Called on 'load-widgets.php' action added in constructor.
    public function load_widgets_php() {
        add_action( 'in_widget_form', array( $this, 'form_maybe_call_javascript_init' ) );
        add_action( 'admin_print_scripts', array( $this, 'admin_print_scripts' ), PHP_INT_MAX );
    }

    // Called on 'load-customize.php' action added in constructor.
    public function load_customize_php() {
        $this->is_customizer = true;
        // Don't add 'in_widget_form' action as customizer sends 'widget-added' event to existing widgets too.
        add_action( 'admin_print_scripts', array( $this, 'admin_print_scripts' ), PHP_INT_MAX );
    }

    // Form javascript initialization code here. "widget" and "widget_id" available.
    public function form_javascript_init() {
    }

    // Called on 'in_widget_form' action (ie directly after form()) when in traditional widgets interface.
    // Run init directly unless we're newly added.
    public function form_maybe_call_javascript_init( $callee_this ) {
        if ( $this === $callee_this && '__i__' !== $this->number ) {
            ?>
            <script type="text/javascript">
            jQuery(function ($) {
                <?php echo $this->js_init_func; ?>(null, $('#widgets-right [id$="<?php echo $this->id; ?>"]'));
            });
            </script>
            <?php
        }
    }

    // Called on 'admin_print_scripts' action added in constructor.
    public function admin_print_scripts() {
        ?>
        <script type="text/javascript">
        var <?php echo $this->js_ns; ?> = <?php echo $this->js_ns; ?> || {}; // Our namespace.
        jQuery(function ($) {
            <?php echo $this->js_init_func; ?> = function (e, widget) {
                var widget_id = widget.attr('id');
                if (widget_id.search(/^widget-[0-9]+_<?php echo $this->id_base; ?>-[0-9]+$/) === -1) { // Check it's our widget.
                    return;
                }
                <?php $this->form_javascript_init(); ?>
            };
            $(document).on('widget-added', <?php echo $this->js_init_func; ?>); // Call init on widget add.
        });
        </script>
        <?php
    }
}

これを使用したテストウィジェットの例:

class WPSE_Test_Widget extends WPSE_JS_Widget {
    var $defaults; // Form defaults. Initialized in constructor.

    function __construct() {
        parent::__construct( 'wpse_test_widget', __( 'WPSE: Test Widget' ), array( 'description' => __( 'Test init of javascript.' ) ) );
        $this->defaults = array(
            'one' => false,
            'two' => false,
            'color' => '#123456',
        );
        add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
            if ( ! in_array( $hook_suffix, array( 'widgets.php', 'customize.php' ) ) ) return;
            wp_enqueue_script( 'wp-color-picker' ); wp_enqueue_style( 'wp-color-picker' );
        } );
    }

    function widget( $args, $instance ) {
        extract( $args );
        extract( wp_parse_args( $instance, $this->defaults ) );

        echo $before_widget, '<p style="color:', $color, ';">', $two ? 'Two' : ( $one ? 'One' : 'None' ), '</p>', $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $new_instance['one'] = isset( $new_instance['one'] ) ? 1 : 0;
        $new_instance['two'] = isset( $new_instance['two'] ) ? 1 : 0;
        return $new_instance;
    }

    function form( $instance ) {
        extract( wp_parse_args( $instance, $this->defaults ) );
        ?>
        <div class="wpse_test">
            <p class="one">
                <input class="checkbox" type="checkbox" <?php checked( $one ); disabled( $two ); ?> id="<?php echo $this->get_field_id( 'one' ); ?>" name="<?php echo $this->get_field_name( 'one' ); ?>" />
                <label for="<?php echo $this->get_field_id( 'one' ); ?>"><?php _e( 'One?' ); ?></label>
            </p>
            <p class="two">
                <input class="checkbox" type="checkbox" <?php checked( $two ); disabled( $one ); ?> id="<?php echo $this->get_field_id( 'two' ); ?>" name="<?php echo $this->get_field_name( 'two' ); ?>" />
                <label for="<?php echo $this->get_field_id( 'two' ); ?>"><?php _e( 'Two?' ); ?></label>
            </p>
            <p class="color">
                <input type="text" value="<?php echo htmlspecialchars( $color ); ?>" id="<?php echo $this->get_field_id( 'color' ); ?>" name="<?php echo $this->get_field_name( 'color' ); ?>" />
            </p>
        </div>
        <?php
    }

    // Form javascript initialization code here. "widget" and "widget_id" available.
    function form_javascript_init() {
        ?>
            $('.one input', widget).change(function (event) { $('.two input', widget).prop('disabled', this.checked); });
            $('.two input', widget).change(function (event) { $('.one input', widget).prop('disabled', this.checked); });
            $('.color input', widget).wpColorPicker({
                <?php if ( $this->is_customizer ) ?> change: _.throttle( function () { $(this).trigger('change'); }, 1000, {leading: false} )
            });
        <?php
    }
}

add_action( 'widgets_init', function () {
    register_widget( 'WPSE_Test_Widget' );
} );

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.