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) {&nbsp; &nbsp; var thisModal = jQuery('#details-modal-' + id);&nbsp; &nbsp; if(thisModal.length){&nbsp; &nbsp; &nbsp; &nbsp; thisModal.modal('toggle');&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; var data = {"id" : id};&nbsp; &nbsp; &nbsp; &nbsp; // send data to store_items/detailsmodal&nbsp; &nbsp; &nbsp; &nbsp; jQuery.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url&nbsp; &nbsp; &nbsp;: '<?= base_url()?>store_items/detailsmodal',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method&nbsp; : "post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data&nbsp; &nbsp; : data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success : function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('body').append(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery('#details-modal-' + id).modal('toggle');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error&nbsp; &nbsp;: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Something went wrong!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}