Question

它来自javaScript和jQuery对我来说是一个巨大的挑战。就像它还不够我开始使用ajax来克服我的问题 - 这就是：

我的页面上有一些空表。表的每个单元都有自己的id。 php脚本正在解析.xlsx文件并通过javaScript代码将正确的链接放到我的html表的单元格中：

document.getElementById("cellNrXY").innerHTML = "<a href=".../remoteContent.php">someLink</a>";

如果单击链接，则会出现模态（引导程序）并加载远程内容（根据单击的链接而不同）。

我的问题是远程内容是以模态缓存的，所以它只在首次运行时才有效。关闭模态并选择另一个链接后，前一个模态出现并未更改为新的远程内容。我在这里阅读了很多基于以下内容的解决方案：

 $(this).removeData('bs.modal');

但没有运气。经过一些尝试不同的解决方案后，一个正常工唯一的问题是：当我第二次在某个其他链接上点击时，模态打开了以前的内容，并且模式更新花了几秒钟。这就是为什么我想在新的模态内容加载时显示旋转元素的原因。在这里的某个地方，我已经阅读了一个使用ajax的解决方案，我已经添加了“运气”并且...它有效：

$("#myModal").on("show.bs.modal", function(e) {
$.ajax({
beforeSend: function() { $('#myModal')
                        .html('<div class="rotatingElement"></div>')
                        .show(); },
complete: function() { $('#myModal').html.hide(); }
});
var link = $(e.relatedTarget);      
$(this).find(".modal-body").load(link.attr("href"));
});

唯一的问题是 - 我不知道为什么会这样。有人在这里向我解释这段代码的功能吗？

Answer 1

如果您阅读了事件show.bs.modal，您将知道在调用show instance方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。详细了解Events

所以正在发生的事情是每次你打开一个模态这个事件触发并进行ajax调用你看到这个$.ajax({ wchi有2个选项设置

预请求回调函数beforeSend
请求完成complete

所以每当模态触发器发出ajax requet时，每次ajax请求我在发送请求之前发出请求，模态html被覆盖$('#myModal').html('<div class="rotatingElement"></div>').show();并且加载器以div元素的形式添加使用类rotatingElement并在requet完成后，通过complete函数$('#myModal').html.hide();删除加载器，然后如上所述的e.relatedTarget属性获取anchor对象并且href anchor的{{1}}在以下两个步骤中加载到模态正文中

.../remoteContent.php

Bootstrap远程Modal在首次运行后不会更新内容

1 个答案: