Bootstrap Modal Doesn't Load Image

Question

I have a modal which is loaded by jQuery. I load the data from database. All data loaded fine but the image--it shows no image. But in the console, it's written normally. Here is the modal trigger:

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

This is the script:

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

this is the detailsmodal function:

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

And this is the modal:

<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>

I cut the code. I have no clue what I should do. The image doesn't show in the modal even if I change the image path with the static path--not taken from database.

Answer 1

You code seems problem with no ajax request success , you have code something like:

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

The problem is when you remove an element from DOM or change element in DOM in loaded page. It can't refered directly with selector. Because every selector is recorded when DOM is loaded and no selector is recorded on dynamic change/placement.

SO In this situation, you need to refer parent element which is not changed, then find the desired element in it. So your code should be like:

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

Also if you wish to show model after every ajax request change toggle to show .

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

It should work!