自定义窗口小部件窗体:无法更改任何输入字段的值

时间:2016-07-10 22:38:12

标签: php html wordpress forms input

我正在创建一个wordpress小部件,它应该包含一些管理员用户应该能够输入的纯文本,并且该部分工作正常。但我还需要上传一个文件,我的javascript工作正常,直到jQuery尝试更改输入#image_url字段的值,因为它只是不更新​​。它使用.val()方法设置正确的值,因此它包含它在DOM中不显示的值,因此更改不可见。然后我试着进入控制台,只是标准选择jQuery和普通文档api的输入字段,如下所示:

var input = document.getElementById("image_url");
input.value = "herpderp";

也失败了,所以只有一些根本就是无法改变输入字段的值,就像jsfiddle.net这样,上面的代码100%正确。所以我的问题是,如果有人在Wordpress中尝试了任何破坏输入字段的东西吗?我已经检查过我的HTML是否格式错误,但我认为它看起来很好。我的代码如下所示:

file:my_theme/functions.php

include_once('widgets/intro.php');

function caribia_enqueue_styles()
{
    $parent_style = 'parent-style';
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
    wp_enqueue_style('caribia-css', get_stylesheet_directory_uri() . '/css/caribia.css');
    wp_enqueue_script('caribia-js', get_stylesheet_directory_uri() . '/js/caribia.js', array('jquery'));
}

function caribia_register_widgets() {
    register_widget('Intro_Widget');
}

function load_wp_media_files() {
    wp_enqueue_media();
}

add_action('wp_enqueue_scripts', 'caribia_enqueue_styles', 12);
add_action('admin_enqueue_scripts', 'caribia_enqueue_styles');
add_action('widgets_init', 'caribia_register_widgets');
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );






file:my_theme/widgets/intro.php
<?php

/**
 * Widget API: Intro_Widget class
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 4.4.0
 */

/**
 * Adds Foo_Widget widget.
 */
class Intro_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'intro_widget',
            __( 'Intro widget', 'text_domain' ),
            array( 'description' => __( 'A intro widget, should output a image, header, sub-headers
            and a description for each subheader', 'text_domain' ), )
        );

        add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
    }

    /**
     * Upload the Javascripts for the media uploader
     */
    public function upload_scripts()
    {
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_enqueue_script('upload_media_widget', get_stylesheet_directory_uri() . '/js/upload-media.js', array('jquery'));
        wp_enqueue_style('thickbox');
    }


    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo "herpderp";
        echo $args['after_widget'];
    }

    /**
     * @param array $instance
     * @return string Default return is 'noform'.
     */
    public function form($instance) {
        ?>
        <div>
            <label for="image_url">Image</label>
            <input type="text" name="image_url" id="image_url" class="regular-text">
            <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
        </div>
        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        return $new_instance;
    }
}

一些javascript:

jQuery(document).ready(function($) {
     $(document).on('click','#upload-btn',function(e) {
        var image = wp.media({
            title: 'Upload Image',
            multiple: false
        }).open().on('select', function(e){
            console.log('select was called');
            var uploaded_image = image.state().get('selection').first();
            console.log(uploaded_image);
            var image_url = uploaded_image.toJSON().url;
            $('#image_url').val(image_url);
        });
    });
});

1 个答案:

答案 0 :(得分:0)

So i had a look at it, and i dont think i ever found out exactly what was wrong, but copying over a input field from another widget and then modifying it made it work somehow. So my widget looks like this now:

<?php

/**
 * Widget API: Intro_Widget class
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 4.4.0
 */

/**
 * Adds Foo_Widget widget.
 */
class Intro_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'intro_widget',
            __( 'Intro widget', 'text_domain' ),
            array( 'description' => __( 'A intro widget, should output a image, header, sub-headers
            and a description for each subheader', 'text_domain' ), )
        );

        add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
    }

    /**
     * Upload the Javascripts for the media uploader
     */
    public function upload_scripts()
    {
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_enqueue_script('upload_media_widget', get_stylesheet_directory_uri() . '/js/upload-media.js', array('jquery'));
        wp_enqueue_style('thickbox');
    }


    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo "herpderp";
        echo $args['after_widget'];
    }

    /**
     * @param array $instance
     * @return string
     */
    public function form($instance) {
        $title = !empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        $image_url = !empty($instance['image_url']) ? $instance['image_url'] : __('New imageurl', 'text_domain');
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title:' ) ); ?></label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
                   name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>"><?php _e( esc_attr( 'Image url:' ) ); ?></label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>"
                   name="<?php echo esc_attr( $this->get_field_name( 'image_url' ) ); ?>" type="text" value="<?php echo esc_attr( $image_url ); ?>">
            <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
        </p>
        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['image_url'] = strip_tags($instance['image_url']);
        $this->flush_widget_cache();
        return $instance;
    }

}

And then i changed the javascript to this:

jQuery(document).ready(function($) {
     $(document).on('click','#upload-btn',function(e) {
        var image = wp.media({
            title: 'Upload Image',
            multiple: false
        }).open().on('select', function(e){
            console.log('select was called');
            var uploaded_image = image.state().get('selection').first();
            console.log(uploaded_image);
            document.getElementById("widget-intro_widget-3-image_url").value = uploaded_image.toJSON().url;
        });
    });
});