jquery呼び出しを使用するWordpressウィジェット

私は、ユーザーがドロップダウンメニューからWebバッジのリストを選択できるウィジェットを作成しようとしています。選択時に、ウィジェットコードは画像のプレビューを表示する必要があります。私はadminのwordpressウィジェットページでイメージをプレビューするために働くjqueryを得るために苦労しています。

ウィジェットのコードは次のとおりです

    <?php

class Pretty_Badges extends WP_Widget {

  function Pretty_Badges() {
     /* Widget settings. */
    $widget_ops = array(
      'classname' => 'prettybadges',
      'description' => 'Loved By The Pretty Blog');

     /* Widget control settings. */
    $control_ops = array(
       'width' => 250,
       'height' => 250,
       'id_base' => 'prettybadges-widget');

    /* Create the widget. */
   $this->WP_Widget('prettybadges-widget', 'The Pretty Blog Badges', $widget_ops, $control_ops );

    if(is_admin()) {

    $admin_script_url = WP_PLUGIN_URL . '/love-the-pretty-blog/js/prettyblog.js';
$admin_script_file = WP_PLUGIN_DIR . '/love-the-pretty-blog/js/prettyblog.js';
if(file_exists($admin_script_file)) {
    wp_register_script('tweet-it-script', $admin_script_url);
    wp_enqueue_script('tweet-it-script');
}
    }


  }

  function form ($instance) {
    /* Set up some default widget settings. */

    $defaults = array('badge' => 'default');
    $instance = wp_parse_args( (array) $instance, $defaults ); ?>

  

<input type="radio" <?php if (1==$instance['badge']) echo 'checked=checked';?> name="<?php echo $this->get_field_name('badge'); ?>" value="1" />


<div id="imagePreview"> </div>

<?php }

jqueryファイル

    $t = jQuery.noConflict();
$t(function() {

    $t("#image").change(function() {
        var src = $t(this).val();

        $t("#imagePreview").html(src ? "" : "");

});    
});
jQuery = jQuery.noConflict();

ありがとうございました

0
これはあなたの質問ではありませんでしたが、$ t ... noConflict()のものは本当に必要ありません。この例のように関数を囲むだけでいいです: jsfiddle.net/katowulf/AM2gF
追加された 著者 Kato,
あなたの質問については、自分のWPプラグインを見つけ出すのではなく、どんなエラーが発生しているのかを知ることはかなり役に立ちます。 FirebugやFirebug Liteを試しましたか?あなたはvar srcでブレークポイントを試しましたか? ;)
追加された 著者 Kato,
theresエラーがないだけで動作しません
追加された 著者 Sergio Pellegrini,
それはウィジェットの管理ページでjqueryをアクティブにする問題
追加された 著者 Sergio Pellegrini,

3 答え

この関数を試してください

jQuery(document).ready(function() {

        jQuery('body').on('change', '#image', change_image);    

        function change_image(){

             var $src = jQuery(this).find('option:selected').val();
         jQuery('.image_path').attr('src',$src);

        }   
});
2
追加された

WordPressでjQueryを実行する方法は

jQuery( document ).ready( function( $ ) {
   //do_stuff();
});

また、ページには複数のウィジェットインスタンスが存在する可能性があるため、IDではなくクラスで作業する必要があります。

sscce があります:

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(),//dependencies
                    false,//version
                    true//on footer
            );
    }    

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

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

    function form( $instance ) {
        echo "File to load: {$this->url}";
    }
}

JavaScriptファイルここに記載されているバグをご覧ください。

/**
 * Function to execute onClick
 */
function test_click()
{
    var number = 1 + Math.floor( Math.random() * 5000000 );
    jQuery( this ).html( 'Stack Overflow #' + number );
}

/**
 * For widgets already present on page 
 */
jQuery( document ).ready( function( $ ) 
{
    $( '.test-me' ).click( test_click );
});

/**
 * For fresh widgets dropped on the sidebar
 * https://wordpress.stackexchange.com/a/37707/12615
 */
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( '.test-me' ).click( test_click );
    }

});
1
追加された

ウィジェットをドラッグした後、jquery関数を有効にしてこの関数を試してみてください。

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('body').on('change', '#image', change_image);    

           function change_image(){
            var $src = jQuery(this).find('option:selected').val();
         jQuery('.image_path').attr('src',$src);

        } 
    }
});
1
追加された