Bootstrap Modal 无法刷新数据

Question

关闭模态再打开另一个模态后，显示的数据不会改变。我需要按原样更改数据。这是我的按钮html：<a data-toggle="modal"  title="Quick View" href="#" onclick="detailsmodal(<?= $row->id; ?>)"><i class=" ti-zoom-in"></i><span>Quick Shop</span></a>然后这是我的 Javascript 代码：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('body').append(data);            jQuery('#details-modal').modal('toggle');        },        error   : function(){            alert("Something went wrong!");        }    });}这是我的 store_items/detailsmodal 函数：function detailsmodal() {    $item_id = $this->input->post('id', TRUE);    $query = $this->get_where($item_id);    foreach ($query->result() as $item) {        $data['item_title'] = $item->item_title;    }    $this->load->view('detailsmodal', $data);}最后是视图。该视图工作正常。唯一的问题是它不显示后面的数据。我不知道问题出在哪里。我一直在这里和那里搜索，但找不到可以解决我的问题的解决方案。请帮忙。

Answer 1

我终于修好了。我刚刚在jQuery('#details-modal').remove();上面添加了这段代码jQuery('body').append(data);，现在一切都很好。

Answer 2

数据：JSON.stringify（数据）

JSON 的一个常见用途是与 Web 服务器交换数据。

向 Web 服务器发送数据时，数据必须是字符串。

使用 JSON.stringify() 将 JavaScript 对象转换为字符串。

Answer 3

如果我理解正确，它会第一次正确加载，然后尝试显示不同的模态只是显示具有相同数据的相同模态。

这很可能是因为您没有使用独特id的模态。使用 被添加到 DOM 的第一个模态id="details-modal"是唯一可以找到的jQuery('#details-modal')模态，因此每次都会显示相同的模态。您可以在 DOM 关闭时从 DOM 中删除模式，但是当用户重新打开他们关闭的模式时，您最终会重复您已经进行的 ajax 调用。

考虑将 添加$row->id到id返回的模态 ieid="details-modal-4"中，然后在您的 javascript 函数中首先检查您是否已经具有所需的特定模态，如果没有，则进行 ajax 调用以获取它。

function detailsmodal(id) {

    var thisModal = jQuery('#details-modal-' + id);

    if(thisModal.length){

        thisModal.modal('toggle');

    }else{

        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('body').append(data);

                jQuery('#details-modal-' + id).modal('toggle');

            },

            error   : function(){

                alert("Something went wrong!");

            }

        });

    }

}