web-dev-qa-db-ja.com

利用可能なウィジェットをサイドバー領域にドラッグするときにjqueryを有効にする

だから私はバックエンドでいくつかのカスタムjqueryを使用しているいくつかのウィジェットがあります。ウィジェットフォームからjqueryファイルを呼び出すことができますが、ウィジェットを保存してページをリロードした後に限ります。

「利用可能なウィジェット」エリアからサイドバーエリアにドラッグしたらすぐにそのjqueryを使用する方法はありますか？

だから私のウィジェットのコードでは、フォーム関数で、私はこれを持っている：

function form( $instance ) {

wp_enqueue_media();
wp_enqueue_script('kjd_widgets',plugins_url('lib/kjd_widgets.js',__FILE__),null);

これはうまくいきますが、ページをリロードした後に限ります。ウィジェットがアクティブになったときにJSをロードするにはどうすればよいですか。新しいウィジェットフォームをjQueryにバインドするには、jQueryに何か追加する必要がありますか？

widgetsjqueryadmin
6
rugbert

私はこのQ&Aからこの問題を知っています： ドラッグアンドドロップ後にウィジェットフォームを更新します（WP save bug） 。

私は Stack Overflowの質問に答えていました そして同じ問題に直面しました。 XMLHttpRequest.responseTextがtrueの場合、AjaxCompleteアクションを追加して関数を起動する必要があります。内部の動作についてはよくわかりませんが、次のコードの1行だけを変更する必要があります（ onetrickpony による）。

// https://wordpress.stackexchange.com/a/37707
jQuery( document ).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 = jQuery('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
            jQuery('DO_OUR_STUFF');
    }
});

デモプラグイン

<?php
/* Plugin Name: Demo Widget jQuery Damit */

add_action( 'widgets_init', 'b5f_load_widgets' );

function b5f_load_widgets() {
    register_widget( 'B5F_Example_Widget' );
}

class B5F_Example_Widget extends WP_Widget {
    private $url;

    function B5F_Example_Widget() {
        $this->url = plugins_url( '/test-me.js', __FILE__ );
        $widget_ops = array( 'classname' => 'example', 'description' => '' );
        $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
        $this->WP_Widget( 'example-widget','Example Widget', $widget_ops, $control_ops );
        if( is_admin() )
            wp_enqueue_script( 'test-me', $this->url, array(), false, true );
    }

    function widget( $args, $instance ) {
        echo 'Test';
    }

    function update( $new_instance, $old_instance ) {
        return $instance;
    }

    function form( $instance ) {
        echo "<a href='#' class='test-me'>File to load: {$this->url}</a>";
    }
}

そしてonetrickponyのコードは私たちのウィジェットに適応しました（/wp-content/our-plugin/test-me.js）：

// Common function to do the Trick and our jQuery action
function test_click() {
    var number = 1 + Math.floor( Math.random() * 5000000 );
    jQuery( this ).html( 'WordPress Answers #' + number );
}

// Our jQuery
jQuery( document ).ready( function( $ ) {
    $( '.test-me' ).click( test_click );
});

// OneTrick's
// https://wordpress.stackexchange.com/a/37707
jQuery( document ).ajaxComplete( function( event, XMLHttpRequest, ajaxOptions ) {
    var request = {}, pairs = ajaxOptions.data.split('&'), i, split, widget;
    for( i in pairs ) {
        split = pairs[i].split( '=' );
        request[decodeURIComponent( split[0] )] = decodeURIComponent( split[1] );
    }

    if( request.action && ( request.action === 'save-widget' ) ) {
        widget = jQuery('input.widget-id[value="' + request['widget-id'] + '"]').parents('.widget');
        if( !XMLHttpRequest.responseText ) 
            wpWidgets.save(widget, 0, 1, 0);
        else
            jQuery( '.test-me' ).click( test_click ); // <--- One trick, pony!
    }
});
7
brasofilo