Wordpress-widgets met behulp van een jQuery-oproep

Ik ben op zoek naar een widget die de gebruiker kan selecteren in een vervolgkeuzemenu een lijst met webbadges. Bij selectie moet de widgetcode een voorbeeld van de afbeelding weergeven. Ik heb er moeite mee om de jQuery aan het werk te krijgen om een ​​voorbeeld van de afbeelding weer te geven op de admin wordpress widgetpagina.

De widgetcode is als volgt

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

en het jQuery-bestand

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

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

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

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

Bedankt in adavnce

0
Dit was niet jouw vraag, maar je hebt niet echt de $ t ... noConflict() dingen nodig; je kunt eenvoudig je functie insluiten zoals in dit voorbeeld: jsfiddle.net/katowulf/AM2gF
toegevoegd de auteur Kato, de bron
Wat je vraag betreft, het zou best een beetje helpen om te weten wat voor soort fout je krijgt, in plaats van dat je mijn eigen WP-plug-in moet gaan maken om erachter te komen. Heb je Firebug of Firebug lite geprobeerd? Heb je een breekpunt geprobeerd bij var src ...? ;)
toegevoegd de auteur Kato, de bron
er is geen fout het werkt gewoon niet
toegevoegd de auteur Sergio Pellegrini, de bron
het is meer een probleem om jQuery te activeren op de widget admin-pagina
toegevoegd de auteur Sergio Pellegrini, de bron

3 antwoord

Probeer deze functie

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
toegevoegd

De manier om jQuery met WordPress uit te voeren is

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

Je zou ook met klassen moeten werken in plaats van met ID's, omdat er meerdere widgetinstanties op de pagina kunnen zijn.

Dit is een 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}";
    }
}

En het JavaScript-bestand. Merk op dat we een Ajax-luisteraar moeten toevoegen om de bug hier beschreven .

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

Na het slepen van widget dan jQuery functie inschakelen probeer deze functie zeer help vol Bedankt;)

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
toegevoegd