【发布时间】：2016-11-12 19:35:48
【问题描述】：
我正在创建一个 wordpress 小部件，它应该包含一些管理员用户应该能够输入的纯文本，并且该部分工作正常。但我还需要上传一个文件，我的 javascript 工作正常，直到 jQuery 尝试更改 input#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);
});
});
});
【问题讨论】：
标签： php html wordpress forms input