Bir jquery çağrısı kullanarak Wordpress widget'ları

Kullanıcının açılan menüden web rozetlerinin bir listesini seçebileceği bir widget yazmak istiyorum. Seçim sırasında, widget kodu görüntünün bir önizlemesini göstermelidir. Yönetici wordpress widget sayfasında görüntüyü önizlemek için jQuery'yi çalıştırmaya çalışıyorum.

Widget kodu aşağıdaki gibidir

    <?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 }

ve jQuery dosyası

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

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

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

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

Adavnce'da teşekkürler

0
Bu senin sorunun değildi, ama gerçekten $ t ... noConflict() şeylerine ihtiyacın yok; işlevinizi şu örnekte olduğu gibi basitçe kapatabilirsiniz: jsfiddle.net/katowulf/AM2gF
katma yazar Kato, kaynak
Sorunuza gelince, öğrenmek için kendi WP eklentisini yaratmaya gitmek yerine, ne tür bir hata yaptığınızı bilmek biraz yardımcı olacaktır. Firebug veya Firebug lite'yi denediniz mi? Var src'de bir kesme noktası denediniz mi? ;)
katma yazar Kato, kaynak
hata yok sadece çalışmıyor
katma yazar Sergio Pellegrini, kaynak
Widget yönetici sayfasında jquery'yi etkinleştirme sorunu daha fazladır
katma yazar Sergio Pellegrini, kaynak

3 cevap

Bu işlevi dene

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
katma

JQuery'yi WordPress ile çalıştırma şekli

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

Ayrıca, sayfada birden fazla pencere öğesi örneği olabileceğinden, kimlikler yerine sınıflarla çalışmalısınız.

İşte bir 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}";
    }
}

Ve JavaScript dosyası. burada açıklanan hata .

/**
 * 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
katma

Widget sürüklendikten sonra jQuery fonksiyonu etkinleştirin bu işlevi deneyin çok yardımcı tam teşekkürler;)

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
katma