Why my image upload button is not working in wordpress widget area?

Question

During making addv. widget I facing a problem.When I am clicking the uploading button then it is not redirecting to media library.How to solve this problem?

<?php

add_action('widgets_init','personalblog_300x600_add_widgets');

function personalblog_300x600_add_widgets(){
        register_widget("pb_300x600_add_widget");
}

class pb_300x600_add_widget extends WP_widget{

// Initialize the widget

    public function pb_300x600_add_widget(){
        $widget_ops = array( 'classname' => 'pb_300x600_add_widget', 'description' => esc_html__( 'Strawberry: A widget that shows 300x600 Adv.' , 'strawberry') );
        parent::__construct('pb_300x600_add_widget', esc_html__('Strawberry: Add 300x600', 'strawberry'), $widget_ops);
    }

    public function widget( $args, $instance ) {
        extract( $args );
        $title    = apply_filters('widget_title', $instance['title'] );
        $adv_href = esc_url($instance['adv_href']);
        $adv_img  = esc_attr($instance['adv_img']);
        $image_id = esc_attr($instance['image_id']);
        $adv_code = $instance['adv_code'];?>
        <div class="advertising">
            <?php if ($adv_code == "") {
                if ($adv_href != "") {?><a href="<?php echo esc_url($adv_href)?>"><?php }?>
                    <img alt="" src="<?php echo ($adv_img)?>">
                <?php if ($adv_href != "") {?></a><?php }?>
            <?php }else {
                echo ($adv_code);
            }?>
        </div><!-- End advertising -->
        <div class="clearfix"></div>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance             = $old_instance;
        $instance['title']    = strip_tags( $new_instance['title'] );
        $instance['adv_code'] = $new_instance['adv_code'];
        $instance['adv_img']  = $new_instance['adv_img'];
        $instance['image_id'] = $new_instance['image_id'];
        $instance['adv_href'] = $new_instance['adv_href'];
        return $instance;
    }

    public function form( $instance ) {
        $defaults = array( 'title' => 'Adv 300x600' );
        $instance = wp_parse_args( (array) $instance, $defaults ); ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e('Title :', 'strawberry'); ?></label>
            <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo (isset($instance['title'])?esc_attr($instance['title']):""); ?>" class="widefat" type="text">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'adv_img' ); ?>"><?php esc_html_e('Image URL :', 'strawberry'); ?> </label>
            <input id="<?php echo $this->get_field_id( 'adv_img' ); ?>" name="<?php echo $this->get_field_name( 'adv_img' ); ?>" value="<?php echo (isset($instance['adv_img'])?$instance['adv_img']:"");?>" class="widefat upload" type="text">
            <br><br>
            <input class="custom_media_button button upload-button-2 upload-button-widget" type="button" value="Upload">
            <br><br>
            <input id="<?php echo $this->get_field_id( 'image_id' ); ?>" name="<?php echo $this->get_field_name( 'image_id' ); ?>" value="<?php echo (isset($instance['image_id'])?$instance['image_id']:"");?>" class="widefat image_id" type="hidden">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'adv_href' ); ?>"><?php esc_html_e('Advertising url : ', 'strawberry'); ?></label>
            <input id="<?php echo $this->get_field_id( 'adv_href' ); ?>" name="<?php echo $this->get_field_name( 'adv_href' ); ?>" value="<?php echo (isset($instance['adv_href'])?esc_attr($instance['adv_href']):""); ?>" class="widefat" type="text">
        </p>

        <em style="display:block; border-bottom:1px solid #CCC; margin-bottom:15px;">OR</em>

        <p>
            <label for="<?php echo $this->get_field_id( 'adv_code' ); ?>"><?php esc_html_e('Advertising Code html ( Ex: Google ads) :', 'strawberry'); ?> </label>
            <textarea id="<?php echo $this->get_field_id( 'adv_code' ); ?>" name="<?php echo $this->get_field_name( 'adv_code' ); ?>" class="widefat"><?php echo (isset($instance['adv_code'])?esc_attr($instance['adv_code']):""); ?></textarea>
        </p>
    <?php
    }
}
?>

Script:

 function media_upload(.custom_media_button.button) {
        var _custom_media = true,
        _orig_send_attachment = wp.media.editor.send.attachment;

        $('body').on('click', button_class, function(e) {
            var button_id ='#'+$(this).attr('id');
            var self = $(button_id);
            var send_attachment_bkp = wp.media.editor.send.attachment;
            var button = $(button_id);
            var id = button.attr('id').replace('_button', '');
            _custom_media = true;
            wp.media.editor.send.attachment = function(props, attachment){
                if ( _custom_media  ) {
                    $('.custom_media_id').val(attachment.id);
                    $('.custom_media_url').val(attachment.url);
                    $('.custom_media_image').attr('src',attachment.url).css('display','block');
                } else {
                    return _orig_send_attachment.apply( button_id, [props, attachment] );
                }
            }
            wp.media.editor.open(button);
                return false;
        });

Thanks

Answer 1

I see a couple of things. First your missing the closing bracket for your js function. Also, in WP you need to use jQuery() rather than $() for jQuery calls. Finally, make sure your script is inside a jQuery(document).ready(function() { });block.