Question

我有一个由jQuery加载的模式。我从数据库加载数据。加载的所有数据都很好，但是有图像-它没有图像。但是在控制台中，它是正常编写的。这是模式触发器：

where stringValue in: ('.', 'X') and reverse(trim(stringValue)) in: ('.', 'X')

这是脚本：

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

这是detailsmodal函数：

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!");
        }
    });
}

这是模态：

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);
}

我削减了代码。我不知道该怎么办。即使我使用静态路径更改了图像路径（也不是从数据库获取的图像），图像也不会显示在模式中。

Answer 1

您的代码似乎没有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');

应该可以！

Bootstrap模式不会加载图像

1 个答案: