将可用小工具拖动到侧边栏区域时启用jQuery

时间:2013-10-09 作者:rugbert

因此,我有一些小部件在后端使用一些自定义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?

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

我从这个问题中了解到这个问题;答:Update widget form after drag-and-drop (WP save bug).

我是answering a Stack Overflow question 面临同样的问题。我们必须添加AjaxComplete 行动并启动我们的功能XMLHttpRequest.responseText 是真的。我不确定内部工作,但我们只需修改以下代码中的一行(通过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!
    }
});

结束