Bootstrap Modal не загружает изображение - PullRequest
Новая
       3

Bootstrap Modal не загружает изображение

1 голос
/ 19 сентября 2019

У меня есть модал, который загружается с помощью jQuery.Я загружаю данные из базы данных.Все данные загружены нормально, но изображение - это не показывает изображение.Но в консоли написано нормально.Вот модальный триггер: 

<a data-toggle="modal"  title="Quick View" href="#" onclick="detailsmodal(<?= $row->id; ?>)"><i class=" ti-zoom-in"></i><span>Quick Shop</span></a>

Это скрипт: 

function detailsmodal(id) {
    var data = {"id" : id};
    // send data to store_items/detailsmodal
    jQuery.ajax({
        url     : '<?= base_url()?>store_items/detailsmodal',
        method  : "post",
        data    : data,
        success : function(data){
            jQuery('#details-modal').remove();
            jQuery('body').append(data);
            jQuery('#details-modal').modal('toggle');

        },
        error   : function(){
            alert("Something went wrong!");
        }
    });
}

Это функция detailsmodal: 

function detailsmodal() {

    $item_id = $this->input->post('id', TRUE);
    $query = $this->get_where($item_id);

    foreach ($query->result() as $item
        $big_pic  = $item->big_pic;
        $data['big_pic_path'] = base_url()."big_pics/".$big_pic;
    }
    $this->load->view('detailsmodal', $data);
}

И это модально:

<div class="modal fade" id="details-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    class="ti-close" aria-hidden="true"></span></button>
        </div>
        <div class="modal-body">
            <div class="row no-gutters">
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                    <div class="quickview-slider-active owl-carousel">
                        <img src="<?= $big_pic_path ?>" alt="">
                        <img src="<?= $big_pic_path ?>" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Я вырезал код.Я понятия не имею, что мне делать.Изображение не отображается в модальном режиме, даже если я изменяю путь изображения статическим путем - не берется из базы данных.

1 Ответ

0 голосов
/ 19 сентября 2019

Ваш код кажется проблемой без запроса AJAX success, у вас есть код что-то вроде: 

jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');

Проблема в том, что вы удаляете элемент из DOM или меняете элемент в DOM на загруженной странице.На него нельзя ссылаться напрямую с помощью селектора.Поскольку каждый селектор записывается при загрузке DOM, а селектор не записывается при динамическом изменении / размещении.

SO В этой ситуации вам нужно сослаться на родительский элемент, который не был изменен, а затем найти в нем нужный элемент.Поэтому ваш код должен выглядеть так: 

jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('body').find('#details-modal').modal('toggle');

Также, если вы хотите показывать модель после каждого запроса ajax, измените toggle на show. 

jQuery('body').find('#details-modal').modal('show');

Это должно работать!

...