Віджети Wordpress за допомогою дзвінка jquery

Я дивлюся, що написав віджет, який користувач може вибрати зі спадного меню список веб-значків. При виборі коду віджета повинен відображатися попередній перегляд зображення. Я намагаюся отримати роботу jQuery для попереднього перегляду зображення на сторінці віджетів адміністратора WordPress.

Віджетний код виглядає наступним чином

    <?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, джерело
немає помилок, це просто не працює
додано Автор 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
додано

Спосіб запуску jQuery з WordPress - це

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

Крім того, ви повинні працювати з класами замість ідентифікаторів, оскільки на сторінці можуть бути декілька екземплярів віджетів.

Ось 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. Зверніть увагу, що нам потрібно додати слухач Ajax, щоб виправити помилка описана тут .

/**
 * 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
додано