Bootstrap Modal 无法刷新数据答案

【问题标题】：Bootstrap Modal Couldn't Refresh the DataBootstrap Modal 无法刷新数据
【发布时间】：2019-09-17 06:47:15
【问题描述】：

关闭模态再打开另一个模态后，显示的数据不会改变。我需要按原样更改数据。这是我的按钮 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);
}

最后是视图。该视图工作正常。唯一的问题是它不显示后面的数据。我不知道问题出在哪里。我一直在这里和那里搜索，但找不到可以解决我的问题的解决方案。请帮忙。

【问题讨论】：

如果出于某种原因需要将页面返回为“字符串”，则需要将第三个参数作为$this->load->view('detailsmodal', $data, true); 放入->view 方法中并将其加载到.html(response)
我是 Javascript 新手。请告诉我如何加载到.html(response)
@MuhammadAbdurrouf 你能告诉我们你的 ajax 成功函数中的数据值吗？添加console.log(data)
@ArleighHix 是的。它显示了整个模态对话。但我不知道它是否通过了正确的 id。接下来我该怎么办？
我也试着把它放在jQuery.ajax({的正上方。它显示了正确的 id。

标签： javascript php jquery html codeigniter-3

【解决方案1】：

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

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

考虑将$row->id 添加到返回模态的id 中，即id="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!");
            }
        });
    }
}

【讨论】：

感谢您的回复，@arleigh。但是，它仍然没有按我的预期工作。仅供参考，模态工作正常。它可以显示 id=4 或 id=5。问题是，如果一开始我打开 id=4，它就无法打开 id=5。或相反亦然。其实它可以显示数据，但是显示的数据是第一个点击的modal。
似乎存在语言障碍，您是否阅读并理解了我的回答，还是只是复制并粘贴了代码块？因为这不是完整的解决方案。

【解决方案2】：

数据：JSON.stringify(数据)

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

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

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

【讨论】：

在您编写的 jQuery.ajax 函数中使用它 (data: data) 。只需替换此 (data:JSON.stringify(data)) 并再次检查

【解决方案3】：

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

【讨论】：