@RuslanSer

Как убрать атрибут disabled у кнопки «Сохранить» в виджете после загрузки картинки в Wordpress?

Есть свой виджет который делает банер.
В виджет нада загружать картинку, но послее ее загрузки кнопка "Сохранить" не активируется (не снимается атрибут disabled), и чтобы ее активировать надо изменить input куда отправляется путь к картинке.
Пробовал затригерить события, но никак.
Сделал костыль через setInterval который постоянно активирует кнопку.
Кроме того, код который должен отрабатывать при клике на кнопку "Загрузить изображение" не отрабатывает.

код:
<?php

class Banner_Widget extends WP_Widget{
    public function __construct()
    {
        // Add Widget scripts
        add_action('admin_enqueue_scripts', array($this, 'scripts'));

        $args = [
            'name' => 'Банер',
            'description' => 'банер в шапке'
        ];

        parent::__construct('Banner_widget', 'Банер', $args);
    }

    /**
     * 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 ) {
        $image = ! empty( $instance['image'] ) ? $instance['image'] : get_template_directory_uri() . '/assets/img/logo.png';

        echo <<<EOT
        <div class="banner">
            <div class="banner_dark"></div>
            <img src="$image" alt="">
        </div>
        EOT;
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        $image = ! empty( $instance['image'] ) ? $instance['image'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e( 'Выберите изображение:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_url( $image ); ?>" />
            <button class="upload_image_button button button-primary">Загрузить изображение</button>
        </p>
        <script>
            jQuery(document).ready(function ($) {
                setInterval(function(){
                    jQuery('#widget-banner_widget-2-savewidget').val('Сохранить').prop('disabled', false);
                }, 500);
                
                $('.upload_image_button').on("click", function (e) {
                    e.preventDefault();
                    var $button = $(this);

                    // Create the media frame.
                    var file_frame = wp.media.frames.file_frame = wp.media({
                        title: 'Select or upload image',
                        library: { // remove these to show all
                            type: 'image' // specific mime
                        },
                        button: {
                            text: 'Выбрать'
                        },
                        multiple: false  // Set to true to allow multiple files to be selected
                    });

                    // When an image is selected, run a callback.
                    file_frame.on('select', function () {
                        // We set multiple to false so only get one image from the uploader
                        var attachment = file_frame.state().get('selection').first().toJSON();

                        $button.siblings('input').val(attachment.url);
                        /*$button.parents('.widget-inside').trigger('input');
                        $('#widget-banner_widget-2-savewidget').trigger('input');
                        $('#widget-banner_widget-2-savewidget').trigger('change');*/
                        jQuery('#widget-banner_widget-2-savewidget').val('Сохранить').prop('disabled', false);
                        //$('#widget-banner_widget-2-savewidget').val('Сохранить');
                        //$('#widget-banner_widget-2-savewidget').val('Сохранить').prop('disabled', false);
                        //$('#widget-banner_widget-2-savewidget').prop('disabled', false);

                        file_frame.close();
                    });
                    // Finally, open the modal
                    file_frame.open();
                });
            });
        </script>
        <?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 = array();
        $instance['image'] = ( ! empty( $new_instance['image'] ) ) ? $new_instance['image'] : '';

        return $instance;
    }

    public function scripts()
    {
        wp_enqueue_script( 'media-upload' );
        wp_enqueue_media();
        wp_enqueue_script('our_admin', get_template_directory_uri() . '/assets/js/our_admin.js', array('jquery'));
    }
}
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы