I'm trying to make simple about me widget with WordPress media uploader. When I click the button Upload it opens media uploader, but after I hit save, the button doesn't work anymore, the same behavior if I have one active widget and then I add another, media upload button doesn't work in second widget. No JS errors in console. Can someone point me, where I'm wrong?
PHP
class Inka_Profile_Widget extends WP_Widget {
// setup the widget name, description etc.
function __construct() {
$widget_options = array(
'classname' => esc_attr( "inka_profile_widget", 'inka' ),
'description' => esc_html__( 'Custom Profile Widget', 'inka' ),
'customize_selective_refresh' => true
);
parent::__construct( 'inka_profile', 'Inka Profile', $widget_options);
}
// back-end display of widget
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'About Me', 'inka' );
$image = ! empty( $instance['image'] ) ? $instance['image'] : '';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id('title') ); ?>"><?php esc_attr_e( 'Title', 'inka' ); ?></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>
<img src="<?php echo esc_attr( $image ); ?>" alt="" class="deo-image-holder" style="width: 100%;">
</p>
<p>
<input type="hidden" class="deo-image-hidden-field" name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" value="<?php echo esc_attr( $image ); ?>"/>
<input type="button" class="deo-image-upload-button button button-primary" value="Upload">
<input type="button" class="deo-image-delete-button button" value="Remove Image">
</p>
<?php
}
// front-end display of widget
function widget( $args, $instance ) {
echo "Hey";
}
// update of the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['image'] = ( ! empty( $new_instance['image'] ) ) ? strip_tags( $new_instance['image'] ) : '';
return $instance;
}
}
add_action( 'widgets_init', function() {
register_widget( 'Inka_Profile_Widget' );
});
JS
(function($){
/* WordPress Media Uploader
-------------------------------------------------------*/
var addButton = $('.deo-image-upload-button');
var deleteButton = $('.deo-image-delete-button');
var hiddenField = $('.deo-image-hidden-field');
var imageHolder = $('.deo-image-holder');
var mediaUploader;
addButton.on('click', function(e) {
e.preventDefault();
if ( mediaUploader ) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Select an Image',
button: {
text: 'Use This Image'
},
multiple: false
});
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
hiddenField.val(attachment.url);
imageHolder.attr('src', attachment.url);
});
mediaUploader.open();
});
})(jQuery);